33Component for animating vertical scrolling.
44
55### Install
6+
67``` js
78$ npm install react- scroll
89```
910
1011### Run
12+
1113``` js
1214$ npm install
1315$ npm test
1416$ npm start
1517```
1618
1719### Examples
20+
1821Checkout examples
1922
20- Live example
23+ Live example
24+
2125> [ Basic] ( https://codesandbox.io/s/basic-6t84k )
2226
2327> [ Basic-Keydown] ( https://codesandbox.io/s/l94kv62o4m )
@@ -29,48 +33,46 @@ Live example
2933> [ With-overflow] ( https://codesandbox.io/s/l94kv62o4m )
3034
3135> [ Code] ( https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js )
36+
3237``` js
3338$ npm start
3439```
3540
3641### Usage
42+
3743``` js
3844// ES6 Imports
3945import * as Scroll from ' react-scroll' ;
40- import { Link , Element , Events , animateScroll as scroll , scrollSpy , scroller } from ' react-scroll'
41-
46+ import { Link , Element , Events , animateScroll as scroll , scrollSpy , scroller } from ' react-scroll'
4247
4348// Or Access Link,Element,etc as follows
44- let Link = Scroll .Link ;
45- let Element = Scroll .Element ;
46- let Events = Scroll .Events ;
47- let scroll = Scroll .animateScroll ;
48- let scrollSpy = Scroll .scrollSpy ;
49+ let Link = Scroll .Link ;
50+ let Element = Scroll .Element ;
51+ let Events = Scroll .Events ;
52+ let scroll = Scroll .animateScroll ;
53+ let scrollSpy = Scroll .scrollSpy ;
4954
5055// ES5
51- var React = require (' react' );
52- var Scroll = require (' react-scroll' );
53-
54- var Link = Scroll .Link ;
55- var Element = Scroll .Element ;
56- var Events = Scroll .Events ;
57- var scroll = Scroll .animateScroll ;
58- var scrollSpy = Scroll .scrollSpy ;
56+ var React = require (' react' );
57+ var Scroll = require (' react-scroll' );
5958
59+ var Link = Scroll .Link ;
60+ var Element = Scroll .Element ;
61+ var Events = Scroll .Events ;
62+ var scroll = Scroll .animateScroll ;
63+ var scrollSpy = Scroll .scrollSpy ;
6064
6165var Section = React .createClass ({
6266 componentDidMount : function () {
63-
6467 Events .scrollEvent .register (' begin' , function (to , element ) {
65- console .log (" begin" , arguments );
68+ console .log (' begin' , arguments );
6669 });
6770
6871 Events .scrollEvent .register (' end' , function (to , element ) {
69- console .log (" end" , arguments );
72+ console .log (' end' , arguments );
7073 });
7174
7275 scrollSpy .update ();
73-
7476 },
7577 componentWillUnmount : function () {
7678 Events .scrollEvent .remove (' begin' );
@@ -92,7 +94,7 @@ var Section = React.createClass({
9294 console .log (to);
9395 },
9496 render : function () {
95- return (
97+ return (
9698 < div>
9799 < Link activeClass= " active" to= " test1" spy= {true } smooth= {true } offset= {50 } duration= {500 } onSetActive= {this .handleSetActive }>
98100 Test 1
@@ -119,7 +121,6 @@ var Section = React.createClass({
119121 test 6 (anchor)
120122 < / div>
121123
122-
123124 < Link to= " firstInsideContainer" containerId= " containerElement" >
124125 Go to first element inside container
125126 < / Link>
@@ -145,15 +146,14 @@ var Section = React.createClass({
145146 < br/ >
146147 < a onClick= {this .scrollMore }> Scroll 100px more from the current position! < / a>
147148 < / div>
148- );
149+ );
149150 }
150151});
151152
152153React .render (
153154 < Section / > ,
154155 document .getElementById (' example' )
155156);
156-
157157```
158158
159159### Props/Options
@@ -207,44 +207,37 @@ React.render(
207207> Scroll To Top
208208
209209``` js
210-
211210var Scroll = require (' react-scroll' );
212211var scroll = Scroll .animateScroll ;
213212
214213scroll .scrollToTop (options);
215-
216214```
217215
218216> Scroll To Bottom
219217
220218``` js
221-
222219var Scroll = require (' react-scroll' );
223220var scroll = Scroll .animateScroll ;
224221
225222scroll .scrollToBottom (options);
226-
227223```
228224
229225> Scroll To (position)
230226
231227``` js
232-
233228var Scroll = require (' react-scroll' );
234229var scroll = Scroll .animateScroll ;
235230
236231scroll .scrollTo (100 , options);
237-
238232```
239233
240234> Scroll To (Element)
241235
242236animateScroll.scrollTo(positionInPixels, props = {});
243237
244238``` js
245-
246- var Scroll = require (' react-scroll' );
247- var Element = Scroll .Element ;
239+ var Scroll = require (' react-scroll' );
240+ var Element = Scroll .Element ;
248241var scroller = Scroll .scroller ;
249242
250243< Element name= " myScrollToElement" >< / Element >
@@ -258,63 +251,53 @@ scroller.scrollTo('myScrollToElement', {
258251 offset: 50 , // Scrolls to element + 50 pixels down the page
259252 ...
260253})
261-
262254```
263255
264256> Scroll More (px)
265257
266258``` js
267-
268259var Scroll = require (' react-scroll' );
269260var scroll = Scroll .animateScroll ;
270261
271262scroll .scrollMore (10 , options);
272-
273263```
274264
275265### Scroll events
276266
277267> begin - start of the scrolling
278268
279269``` js
280-
281270var Scroll = require (' react-scroll' );
282271var Events = Scroll .Events ;
283272
284273Events .scrollEvent .register (' begin' , function (to , element ) {
285- console .log (" begin" , to, element);
274+ console .log (' begin' , to, element);
286275});
287-
288276```
289277
290278> end - end of the scrolling/animation
291279
292280``` js
293281
294282Events .scrollEvent .register (' end' , function (to , element ) {
295- console .log (" end" , to, element);
283+ console .log (' end' , to, element);
296284});
297-
298285```
299286
300-
301287> Remove events
302288
303289``` js
304-
305290Events .scrollEvent .remove (' begin' );
306291Events .scrollEvent .remove (' end' );
307-
308292```
309293
310-
311294#### Create your own Link/Element
312295> Simply just pass your component to one of the high order components (Element/Scroll)
313296
314297``` js
315- var React = require (' react' );
316- var Scroll = require (' react-scroll' );
317- var ScrollLink = Scroll .ScrollLink ;
298+ var React = require (' react' );
299+ var Scroll = require (' react-scroll' );
300+ var ScrollLink = Scroll .ScrollLink ;
318301var ScrollElement = Scroll .ScrollElement ;
319302
320303var Element = React .createClass ({
@@ -340,22 +323,19 @@ var Link = React.createClass({
340323});
341324
342325module .exports = ScrollLink (Link);
343-
344326```
345327
346328### Scroll Animations
347329> Add a custom easing animation to the smooth option. This prop will accept a Boolean if you want the default, or any of the animations listed below
348330
349331``` js
350-
351332scroller .scrollTo (' myScrollToElement' , {
352333 duration: 1500 ,
353334 delay: 100 ,
354- smooth: " easeInOutQuint" ,
335+ smooth: ' easeInOutQuint' ,
355336 containerId: ' ContainerElementID' ,
356337 ...
357338})
358-
359339```
360340
361341> List of currently available animations:
0 commit comments