Skip to content

Commit 6d13744

Browse files
authored
docs: cleanup inconsistencies (#431)
Cleaned up the README a bit. Huddled around single quotes and lining up those equal signs. Also dropped unnecessary line breaks and added in some line breaks to make the raw file more readable. Also noticed tabs in a few spots. Cool lib, keep up the great work!
1 parent 186068c commit 6d13744

File tree

1 file changed

+32
-52
lines changed

1 file changed

+32
-52
lines changed

README.md

Lines changed: 32 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,25 @@
33
Component 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+
1821
Checkout 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
3945
import * 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

6165
var 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

152153
React.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-
211210
var Scroll = require('react-scroll');
212211
var scroll = Scroll.animateScroll;
213212

214213
scroll.scrollToTop(options);
215-
216214
```
217215

218216
> Scroll To Bottom
219217
220218
```js
221-
222219
var Scroll = require('react-scroll');
223220
var scroll = Scroll.animateScroll;
224221

225222
scroll.scrollToBottom(options);
226-
227223
```
228224

229225
> Scroll To (position)
230226
231227
```js
232-
233228
var Scroll = require('react-scroll');
234229
var scroll = Scroll.animateScroll;
235230

236231
scroll.scrollTo(100, options);
237-
238232
```
239233

240234
> Scroll To (Element)
241235
242236
animateScroll.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;
248241
var 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-
268259
var Scroll = require('react-scroll');
269260
var scroll = Scroll.animateScroll;
270261

271262
scroll.scrollMore(10, options);
272-
273263
```
274264

275265
### Scroll events
276266

277267
> begin - start of the scrolling
278268
279269
```js
280-
281270
var Scroll = require('react-scroll');
282271
var Events = Scroll.Events;
283272

284273
Events.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

294282
Events.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-
305290
Events.scrollEvent.remove('begin');
306291
Events.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;
318301
var ScrollElement = Scroll.ScrollElement;
319302

320303
var Element = React.createClass({
@@ -340,22 +323,19 @@ var Link = React.createClass({
340323
});
341324

342325
module.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-
351332
scroller.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

Comments
 (0)