@generalizers/react-context

Installation

npm

1npm i @generalizers/react-context

Add issues

You can add issues to : https://github.com/Generalizers/react-context/issues

How to use

Context creation helper

The context generator create the context for you and wraps the Provider of that context to automatically retreive a state that is then disposed to the user.

1export const {
2  useHook: useUser, // Get the state & setState
3  Provider: UserProvider, // Provide a new, unique state
4  Consumer: UserConsumer, // Consume the state & setState
5} = contextGenerator<UserInterface>(
6  {
7    name: 'Jeremy',
8    age: 38,
9  },
10  'User', // Context label (optional)
11);

Use in components

This portion of code will increment the age of Jeremy as the seconds pass. Please note that you can use the useEffect hook inside the consumer function. The function is actually an Anonymous component.

1export const App: FunctionComponent = () => {
2  return (
3    <UserProvider>
4      {/* The default value is default context value */}
5      {/* The state relies in the Provider and is mutable */}
6      <UserConsumer>
7        {([user, setUser]) => {
8          useEffect(() => {
9            setTimeout(() => {
10              setUser({ ...user, age: user.age + 1 });
11            }, 1000);
12          }, [user.age]);
13
14          return (
15            <div>
16              {user.name} - {user.age} years old
17            </div>
18          );
19        }}
20      </UserConsumer>
21    </UserProvider>
22  );
23};