React hooks are awesome.

React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop “custom hooks” to add a new functionality. Although it’s not released yet, I would like to introduce a new library to support global state. Note that it’s still an experiment.

The library

It’s called “react-hooks-global-state” and is available in npm. Please also checkout the GitHub repository.

How to code with it

First, you need to define a global state and export a Provider and a custom hook.

import { createGlobalState } from 'react-hooks-global-state';



export const { GlobalStateProvider, useGlobalState } = createGlobalState({

counter: 0,

person: {

age: 0,

firstName: '',

lastName: '',

},

});

Then, use the hook to implement a Component.

import * as React from 'react';



import { useGlobalState } from './state';



const Counter = () => {

const [value, update] = useGlobalState('counter');

return (

<div>

<span>

Count:

{value}

</span>

<button type="button" onClick={() => update(v => v + 1)}>+1</button>

<button type="button" onClick={() => update(v => v - 1)}>-1</button>

</div>

);

};



export default Counter;

Even if you use the Counter component twice, they share the state.

import * as React from 'react';



import { GlobalStateProvider } from './state'; import Counter from './Counter';

import Person from './Person'; // Refer the code in the repository



const App = () => (

<GlobalStateProvider>

<h1>Counter</h1>

<Counter />

<Counter />

<h1>Person</h1>

<Person />

<Person />

</GlobalStateProvider>

);



export default App;

The full code is in examples/02_typescript folder in the repository. You can try this example by cloning the repository and run:



npm install

npm run examples:typescript git clone https://github.com/dai-shi/react-hooks-global-state.git npm installnpm run examples:typescript

Open http://localhost:8080 after it’s up and running.

Is this TypeScript?

Actually, yes! It’s fully typed, and furthermore there’s no implicit any type in the code. The example code is written in TypeScript, but the library itself is written in JavaScript with type definitions, so you can use it either way as you like.

Any feedbacks?

Feedbacks are appreciated via Medium, Twitter or GitHub issues. Thanks!

Changelog