Skip to content

Commit 780888f

Browse files
thebuilderthebuilder
authored
Restructure readme file
1 parent 5245bf6 commit 780888f

File tree

1 file changed

+27
-40
lines changed

1 file changed

+27
-40
lines changed

‎README.md‎

Lines changed: 27 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -9,29 +9,7 @@ React component that triggers a function when the component enters or leaves the
99
viewport. No complex configuration needed, just wrap your views and it handles
1010
the events.
1111

12-
```js
13-
import Observer from 'react-intersection-observer'
14-
15-
const Component = () => (
16-
<Observer>
17-
{inView => <h2>{`Header inside viewport ${inView}.`}</h2>}
18-
</Observer>
19-
)
20-
21-
export default Component
22-
```
23-
24-
## Demo
25-
26-
See https://thebuilder.github.io/react-intersection-observer/ for a demo.
27-
28-
#### Scroll monitor
29-
30-
This module is used in
31-
[react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage)
32-
to monitor the scroll position of elements in view. This module is also a great
33-
example of using `react-intersection-observer` as the basis for more complex
34-
needs.
12+
> **Storybook demo:** https://thebuilder.github.io/react-intersection-observer/
3513
3614
## Installation
3715

@@ -47,22 +25,6 @@ or NPM:
4725
npm install react-intersection-observer --save
4826
```
4927

50-
## Props
51-
52-
The **`<Observer />`** accepts the following props:
53-
54-
| Name | Type | Default | Required | Description |
55-
| --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
56-
| **children** | Func/Node | | false | Children should be either a function or a node |
57-
| **render** | ({inView, ref}) => Node | | false | Render prop allowing you to control the view. |
58-
| **root** | HTMLElement | | false | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. |
59-
| **rootId** | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. |
60-
| **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). |
61-
| **tag** | String | 'div' | false | Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div' |
62-
| **threshold** | Number | 0 | false | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
63-
| **triggerOnce** | Bool | false | false | Only trigger this method once |
64-
| **onChange** | Func | | false | Call this function whenever the in view state changes |
65-
6628
## Usage
6729

6830
### Child as function
@@ -121,7 +83,32 @@ const Component = () => (
12183
export default Component
12284
```
12385

124-
### Polyfill for intersection-observer
86+
## Props
87+
88+
The **`<Observer />`** accepts the following props:
89+
90+
| Name | Type | Default | Required | Description |
91+
| --------------- | ----------------------- | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
92+
| **children** | Func/Node | | false | Children should be either a function or a node |
93+
| **render** | ({inView, ref}) => Node | | false | Render prop allowing you to control the view. |
94+
| **root** | HTMLElement | | false | The HTMLElement that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if null. |
95+
| **rootId** | String | | false | Unique identifier for the root element - This is used to identify the IntersectionObserver instance, so it can be reused. If you defined a root element, without adding an id, it will create a new instance for all components. |
96+
| **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). |
97+
| **tag** | String | 'div' | false | Element tag to use for the wrapping element when rendering using 'children'. Defaults to 'div' |
98+
| **threshold** | Number | 0 | false | Number between 0 and 1 indicating the the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
99+
| **triggerOnce** | Bool | false | false | Only trigger this method once |
100+
| **onChange** | Func | | false | Call this function whenever the in view state changes |
101+
102+
103+
## Scroll monitor
104+
105+
This module is used in
106+
[react-scroll-percentage](https://github.com/thebuilder/react-scroll-percentage)
107+
to monitor the scroll position of elements in view. This module is also a great
108+
example of using `react-intersection-observer` as the basis for more complex
109+
needs.
110+
111+
## Polyfill for intersection-observer
125112

126113
The component requires the [intersection-observer
127114
API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

0 commit comments

Comments
 (0)