@generalizers/react-context
Installation
npm
npm i @generalizers/react-contextAdd 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.
export const {
useHook: useUser, // Get the state & setState
Provider: UserProvider, // Provide a new, unique state
Consumer: UserConsumer, // Consume the state & setState
} = contextGenerator<UserInterface>(
{
name: 'Jeremy',
age: 38,
},
'User', // Context label (optional)
);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.
export const App: FunctionComponent = () => {
return (
<UserProvider>
{/* The default value is default context value */}
{/* The state relies in the Provider and is mutable */}
<UserConsumer>
{([user, setUser]) => {
useEffect(() => {
setTimeout(() => {
setUser({ ...user, age: user.age + 1 });
}, 1000);
}, [user.age]);
return (
<div>
{user.name} - {user.age} years old
</div>
);
}}
</UserConsumer>
</UserProvider>
);
};
