react-hooks-outside

Call react hooks from outside of the components

Usage no npm install needed!

<script type="module">
  import reactHooksOutside from 'https://cdn.skypack.dev/react-hooks-outside';
</script>

README

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);
}