@@ -12,8 +12,6 @@ to tell you when an element enters or leaves the viewport. Contains both a
12
12
[ Hooks] ( #useinview-hook ) , [ render props] ( #render-props ) and
13
13
[ plain children] ( #plain-children ) implementation.
14
14
15
- ** Storybook Demo:**
16
- [ https://react-intersection-observer.vercel.app ] ( https://react-intersection-observer.vercel.app )
17
15
18
16
## Features
19
17
@@ -32,13 +30,7 @@ to tell you when an element enters or leaves the viewport. Contains both a
32
30
33
31
## Installation
34
32
35
- Install using [ Yarn] ( https://yarnpkg.com ) :
36
-
37
- ``` sh
38
- yarn add react-intersection-observer
39
- ```
40
-
41
- or NPM:
33
+ Install the package with your package manager of choice:
42
34
43
35
``` sh
44
36
npm install react-intersection-observer --save
@@ -82,8 +74,6 @@ const Component = () => {
82
74
};
83
75
```
84
76
85
- [ ![ Edit useInView] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/useinview-ud2vo?fontsize=14&hidenavigation=1&theme=dark )
86
-
87
77
### Render props
88
78
89
79
To use the ` <InView> ` component, you pass it a function. It will be called
@@ -113,8 +103,6 @@ const Component = () => (
113
103
export default Component ;
114
104
```
115
105
116
- [ ![ Edit InView render props] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/inview-render-props-hvhcb?fontsize=14&hidenavigation=1&theme=dark )
117
-
118
106
### Plain children
119
107
120
108
You can pass any element to the ` <InView /> ` , and it will handle creating the
@@ -134,8 +122,6 @@ const Component = () => (
134
122
export default Component ;
135
123
```
136
124
137
- [ ![ Edit InView plain children] ( https://codesandbox.io/static/img/play-codesandbox.svg )] ( https://codesandbox.io/s/inview-plain-children-vv51y?fontsize=14&hidenavigation=1&theme=dark )
138
-
139
125
> ** Note** <br > When rendering a plain child, make sure you keep your HTML output
140
126
> semantic. Change the ` as ` to match the context, and add a ` className ` to style
141
127
> the ` <InView /> ` . The component does not support Ref Forwarding, so if you
0 commit comments