Skip to content

Commit d011076

Browse files
committed
Add scrolling api to readme
1 parent 21ee1ae commit d011076

File tree

1 file changed

+24
-2
lines changed

1 file changed

+24
-2
lines changed

README.md

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ $ yarn add react-router-hash-link
1414
$ npm install --save react-router-hash-link
1515
```
1616

17-
## `<HashLink>`
17+
### `<HashLink>`
1818
```javascript
1919
// In YourComponent.js
2020
...
@@ -25,7 +25,7 @@ import { HashLink as Link } from 'react-router-hash-link';
2525
```
2626

2727

28-
## `<NavHashLink>`
28+
### `<NavHashLink>`
2929
```javascript
3030
// In YourComponent.js
3131
...
@@ -35,5 +35,27 @@ import { NavHashLink as NavLink } from 'react-router-hash-link';
3535
<NavLink
3636
to="/some/path#with-hash-fragment"
3737
activeClassName="selected"
38+
// etc...
3839
>Link to Hash Fragment</NavLink>
3940
```
41+
42+
### Scrolling API
43+
`smooth: boolean`
44+
- Smooth scroll to the element
45+
- React Router Hash Link uses the native Element method `element.scrollIntoView()` for scrolling, and when the `smooth` prop is present it will call it with the smooth option, `element.scrollIntoView({ behavior: 'smooth' })`
46+
- Note that not all browsers have implemented options for `scrollIntoView` - see [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView) and [Can I Use](https://caniuse.com/#feat=scrollintoview) - there is also a browser [polyfill for smooth scrolling](https://github.com/iamdustan/smoothscroll) which you can install separately so `smooth` will work in all browsers
47+
```js
48+
import { HashLink as Link } from 'react-router-hash-link';
49+
<Link smooth to="/path#hash">Link to Hash Fragment</Link>
50+
```
51+
52+
`scroll: function`
53+
- Custom scroll function called with the element to scroll to, e.g. `const myScrollFn = element => {...}`
54+
- This allows you to do things like scroll with offset, use a specific smooth scrolling library, or pass in your own options to `scrollIntoView`
55+
```js
56+
import { HashLink as Link } from 'react-router-hash-link';
57+
<Link
58+
to="/path#hash"
59+
scroll={el => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
60+
>Link to Hash Fragment</Link>
61+
```

0 commit comments

Comments
 (0)