@@ -10,7 +10,7 @@ When you click on a link created with `react-router-hash-link` it will scroll to
10
10
11
11
### [ Live demo app for React Router Hash Link] ( https://react-router-hash-link.rafgraph.dev )
12
12
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 )
14
14
15
15
---
16
16
@@ -26,26 +26,27 @@ npm install --save react-router-hash-link
26
26
27
27
### ` <HashLink> `
28
28
29
- ``` javascript
30
- // In YourComponent.js
31
- ...
29
+ ``` js
32
30
import { HashLink } from ' react-router-hash-link' ;
31
+
33
32
...
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
35
36
< HashLink to= " /some/path#with-hash-fragment" > Link to Hash Fragment< / HashLink>
36
37
```
37
38
38
39
---
39
40
40
41
### ` <NavHashLink> `
41
42
42
- ``` javascript
43
- // In YourComponent.js
44
- ...
43
+ ``` js
45
44
import { NavHashLink } from ' react-router-hash-link' ;
45
+
46
46
...
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
49
50
< NavHashLink
50
51
to= " /some/path#with-hash-fragment"
51
52
activeClassName= " selected"
@@ -66,6 +67,9 @@ import { NavHashLink } from 'react-router-hash-link';
66
67
67
68
``` js
68
69
import { HashLink } from ' react-router-hash-link' ;
70
+
71
+ ...
72
+
69
73
< HashLink smooth to= " /path#hash" >
70
74
Link to Hash Fragment
71
75
< / HashLink> ;
@@ -80,6 +84,9 @@ import { HashLink } from 'react-router-hash-link';
80
84
81
85
``` js
82
86
import { HashLink } from ' react-router-hash-link' ;
87
+
88
+ ...
89
+
83
90
< HashLink
84
91
to= " /path#hash"
85
92
scroll= {(el ) => el .scrollIntoView ({ behavior: ' instant' , block: ' end' })}
@@ -97,6 +104,9 @@ import { HashLink } from 'react-router-hash-link';
97
104
98
105
``` js
99
106
import { HashLink } from ' react-router-hash-link' ;
107
+
108
+ ...
109
+
100
110
< HashLink to= " /path#top" > Link to Top of Page< / HashLink>
101
111
// or
102
112
< HashLink to= " #top" > Link to Top of Page< / HashLink>
0 commit comments