Skip to content

Commit

Permalink
minor README.md changes
Browse files Browse the repository at this point in the history
  • Loading branch information
ukorvl committed Aug 9, 2023
1 parent 1c90860 commit 26dc3d5
Showing 1 changed file with 5 additions and 1 deletion.
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,8 @@ const MyComponent = () => {

### HOC
```tsx
import { WithOnScreen } from '@ukorvl/react-on-screen';

const List = forwardRef(function List({isOnScreen, ...restProps}: ListProps, ref) {
return (
<ul ref={ref} className={isOnScreen ? 'my-class' : ''} {...restProps}>
Expand All @@ -84,7 +86,7 @@ export const ListWithOnScreen = WithOnScreen(List, {threshold: 0.5, margin: '4re
```

### API
**useOnScreen** hook parameters. **OnScreen** and **WithOnScreen** components have the same api, except ref. **useOnScreen** consumes target element ref as a parameter, but components deal with target element in a different way.
**useOnScreen** hook parameters.

|Name |Default |Description |
|----------------|----------------|-------------------|
Expand All @@ -93,6 +95,8 @@ export const ListWithOnScreen = WithOnScreen(List, {threshold: 0.5, margin: '4re
|once |false |Triggers visibility detection only once. Once target element becomes visible, visibility detection will be disabled.|
|initialVisibility |false |Initial isOnScreen value. Could be useful when working with elements that are on the screen at the first render, and we don't want to wait for InersectionObserver initialization to do some actions.|

**OnScreen** and **WithOnScreen** components have the same api, except ref. **useOnScreen** consumes target element ref as a parameter, but components deal with target element in a different way.

## License

[MIT](http://opensource.org/licenses/MIT)

0 comments on commit 26dc3d5

Please sign in to comment.