Skip to content

Commit 9a91d61

Browse files
committed
Update readme
1 parent 6a853ac commit 9a91d61

File tree

1 file changed

+20
-10
lines changed

1 file changed

+20
-10
lines changed

README.md

Lines changed: 20 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ When you click on a link created with `react-router-hash-link` it will scroll to
1010

1111
### [Live demo app for React Router Hash Link](https://react-router-hash-link.rafgraph.dev)
1212

13-
Code is in the [`/demo`](/demo) folder.
13+
Code is in the [`/demo`](/demo) folder, or open the [demo in CodeSandbox](https://githubbox.com/rafgraph/react-router-hash-link/tree/main/demo)
1414

1515
---
1616

@@ -26,26 +26,27 @@ npm install --save react-router-hash-link
2626

2727
### `<HashLink>`
2828

29-
```javascript
30-
// In YourComponent.js
31-
...
29+
```js
3230
import { HashLink } from 'react-router-hash-link';
31+
3332
...
34-
// Use it just like a RRv4/5 <Link> (to can be a string or an object, see RRv4/5 api for details)
33+
34+
// use it just like a RRv4/5 <Link>
35+
// the `to` prop can be a string or an object, see RRv4/5 api for details
3536
<HashLink to="/some/path#with-hash-fragment">Link to Hash Fragment</HashLink>
3637
```
3738

3839
---
3940

4041
### `<NavHashLink>`
4142

42-
```javascript
43-
// In YourComponent.js
44-
...
43+
```js
4544
import { NavHashLink } from 'react-router-hash-link';
45+
4646
...
47-
// Use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details)
48-
// It will be active only if both the path and hash fragment match
47+
48+
// use it just like a RRv4/5 <NavLink> (see RRv4/5 api for details)
49+
// it will be active only if both the path and hash fragment match
4950
<NavHashLink
5051
to="/some/path#with-hash-fragment"
5152
activeClassName="selected"
@@ -66,6 +67,9 @@ import { NavHashLink } from 'react-router-hash-link';
6667

6768
```js
6869
import { HashLink } from 'react-router-hash-link';
70+
71+
...
72+
6973
<HashLink smooth to="/path#hash">
7074
Link to Hash Fragment
7175
</HashLink>;
@@ -80,6 +84,9 @@ import { HashLink } from 'react-router-hash-link';
8084

8185
```js
8286
import { HashLink } from 'react-router-hash-link';
87+
88+
...
89+
8390
<HashLink
8491
to="/path#hash"
8592
scroll={(el) => el.scrollIntoView({ behavior: 'instant', block: 'end' })}
@@ -97,6 +104,9 @@ import { HashLink } from 'react-router-hash-link';
97104

98105
```js
99106
import { HashLink } from 'react-router-hash-link';
107+
108+
...
109+
100110
<HashLink to="/path#top">Link to Top of Page</HashLink>
101111
// or
102112
<HashLink to="#top">Link to Top of Page</HashLink>

0 commit comments

Comments
 (0)