react-hooks-outside

react-hooks-outside

Call react hooks from outside of the components

Installation

Using npm:

npm install --save react-hooks-outside

Import module

// using ES6 modules
import { ReactHooksWrapper, setHook, getHook } from "react-hooks-outside";

API

• setHook( name, hook )
• getHook( name )

Demo

https://codesandbox.io/s/demo-react-hooks-outside-k8vh9

Example

Add <ReactHooksWrapper /> component to App.js file and declare some hooks

import  { ReactHooksWrapper, setHook }  from  'react-hooks-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-hooks-outside";

function  goToPage(pathname){
	const history =  getHook("history");
	history.push(pathname);
}