Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
@thebuilder
thebuilder authored Nov 22, 2021
1 parent a2205ce commit a6d11be
Showing 1 changed file with 4 additions and 7 deletions.
11 changes: 4 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,7 @@ npm install react-intersection-observer --save

## Usage

### Hooks 🎣

#### `useInView`
### `useInView` hook

```js
// Use object destructing, so you don't need to remember the exact order
Expand Down Expand Up @@ -142,15 +140,14 @@ export default Component;

### Options

Provide these as props on the **`<InView />`** component or as the options
argument for the hooks.
Provide these as the options argument in the `useInView` hook or as props on the **`<InView />`** component.

| Name | Type | Default | Required | Description |
| ---------------------- | ---------------------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **root** | `Element` | document | false | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is `null`, then the bounds of the actual document viewport are used. |
| **rootMargin** | `string` | '0px' | false | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left). |
| **threshold** | `number` \| `number[]` | 0 | false | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
| **trackVisibility** 🧪 | `boolean` | false | false | A boolean indicating whether this IntersectionObserver will track changes in a target’s visibility. |
| **threshold** | `number` \| `number[]` | 0 | false | Number between `0` and `1` indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
| **trackVisibility** 🧪 | `boolean` | false | false | A boolean indicating whether this IntersectionObserver will track visibility changes on the target. |
| **delay** 🧪 | `number` | undefined | false | A number indicating the minimum delay in milliseconds between notifications from this observer for a given target. This must be set to at least `100` if `trackVisibility` is `true`. |
| **skip** | `boolean` | false | false | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept. |
| **triggerOnce** | `boolean` | false | false | Only trigger the observer once. |
Expand Down

1 comment on commit a6d11be

@vercel
Copy link

@vercel vercel bot commented on a6d11be Nov 22, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.