Call react hooks from outside of the components
Using npm:
npm install --save react-hook-outside Import module
// using ES6 modules
import { ReactHooksWrapper, setHook, getHook } from "react-hook-outside";
- setHook( name, hook )
- getHook( name )
https://codesandbox.io/s/demo-react-hooks-outside-k8vh9
Add <ReactHooksWrapper /> component to App.js file and declare some hooks
import { ReactHooksWrapper, setHook } from 'react-hook-outside';
import React from 'react';
//
import { useHistory } from "react-router-dom";
import { useSnackbar } from "notistack";
setHook("history", useHistory)
.setHook("snackbar", useSnackbar)
// .setHook("hook1", useHook1)
// .setHook("hookWithArguments", useHookWithArguments.bind(null, arg1, arg2))
// .setHook("hook3", useHook3);
const App = ()=> {
return (
<div>
...
<ReactHooksWrapper />
</div>
);
}
render(<App />, document.getElementById('root'));
Then you can call the hook from any place you want
import { getHook } from "react-hook-outside";
function goToPage(pathname){
const history = getHook("history");
history.push(pathname);
}