|
1 |
| -# react-hook-outside |
| 1 | + |
| 2 | +# react-hooks-outside |
| 3 | + |
2 | 4 | Call react hooks from outside of the components
|
3 |
| -## Installation |
| 5 | + |
| 6 | +## Installation |
| 7 | + |
4 | 8 | Using npm:
|
5 | 9 |
|
6 |
| - npm install --save react-hook-outside |
7 |
| -Import module |
| 10 | + npm install --save react-hooks-outside |
8 | 11 |
|
9 |
| - // using ES6 modules |
10 |
| - import { ReactHooksWrapper, setHook, getHook } from "react-hook-outside"; |
11 |
| -## API |
| 12 | +Import module |
12 | 13 |
|
| 14 | + // using ES6 modules |
| 15 | + import { ReactHooksWrapper, setHook, getHook } from "react-hooks-outside"; |
| 16 | +## API |
13 | 17 | - setHook( name, hook )
|
14 | 18 | - getHook( name )
|
15 |
| -## Demo |
16 |
| -https://codesandbox.io/s/demo-react-hooks-outside-k8vh9 |
17 | 19 |
|
18 |
| -## Example |
| 20 | +## Demo |
| 21 | +https://codesandbox.io/s/demo-react-hooks-outside-k8vh9 |
19 | 22 |
|
| 23 | + |
| 24 | +## Example |
20 | 25 | Add \<ReactHooksWrapper /> component to App.js file and declare some hooks
|
21 | 26 |
|
22 | 27 | ```javascript
|
23 |
| -import { ReactHooksWrapper, setHook } from 'react-hook-outside'; |
24 |
| -import React from 'react'; |
25 |
| - // |
26 |
| - import { useHistory } from "react-router-dom"; |
27 |
| - import { useSnackbar } from "notistack"; |
28 |
| - |
| 28 | +import { ReactHooksWrapper, setHook } from 'react-hooks-outside'; |
| 29 | +import React from 'react'; |
| 30 | +// |
| 31 | +import { useHistory } from "react-router-dom"; |
| 32 | +import { useSnackbar } from "notistack"; |
| 33 | + |
29 | 34 | setHook("history", useHistory)
|
30 |
| - .setHook("snackbar", useSnackbar) |
31 |
| - // .setHook("hook1", useHook1) |
32 |
| - // .setHook("hookWithArguments", useHookWithArguments.bind(null, arg1, arg2)) |
33 |
| - // .setHook("hook3", useHook3); |
34 |
| - |
35 |
| -const App = ()=> { |
36 |
| - return ( |
37 |
| - <div> |
38 |
| - ... |
39 |
| - <ReactHooksWrapper /> |
40 |
| - </div> |
41 |
| - ); |
| 35 | + .setHook("snackbar", useSnackbar) |
| 36 | + // .setHook("hook1", useHook1) |
| 37 | + // .setHook("hookWithArguments", useHookWithArguments.bind(null, arg1, arg2)) |
| 38 | + // .setHook("hook3", useHook3); |
| 39 | + |
| 40 | +const App = ()=> { |
| 41 | + return ( |
| 42 | + <div> |
| 43 | + ... |
| 44 | + <ReactHooksWrapper /> |
| 45 | + </div> |
| 46 | + ); |
42 | 47 | }
|
43 | 48 |
|
44 | 49 | render(<App />, document.getElementById('root'));
|
45 | 50 | ```
|
46 |
| - Then you can call the hook from any place you want |
47 |
| -```javascript |
48 |
| -import { getHook } from "react-hook-outside"; |
| 51 | +Then you can call the hook from any place you want |
| 52 | +```javascript |
| 53 | +import { getHook } from "react-hooks-outside"; |
49 | 54 |
|
50 |
| -function goToPage(pathname){ |
51 |
| - const history = getHook("history"); |
52 |
| - history.push(pathname); |
| 55 | +function goToPage(pathname){ |
| 56 | + const history = getHook("history"); |
| 57 | + history.push(pathname); |
53 | 58 | }
|
54 | 59 | ```
|
0 commit comments