react-useglobalstate
Introduction
Many developers are looking for a solution to handle a react app global state away from Redux
. So, I have created this package to simplify global state management for small and medium sized apps
Basic usage
npm i @morefaie/react-useglobalstate
# or
yarn add @morefaie/react-useglobalstate
Initializing State
In your App.js file (or the top file of components that will use the global state) import the global state provider, initialize the global state and wrap your app components with the provider.
import GlobalStateProvider from "@morefaie/react-useglobalstate";
// ...
const initialGlobalState = {
isUserLoggedIn: false,
};
const App = () => {
// ...
return (
<GlobalStateProvider state={initialGlobalState}>
{/* You app entry components here */}
</GlobalStateProvider>
);
};
export default App;
To access the global state from any component:
import { useGlobalState } from "@morefaie/react-useglobalstate";
// ...
const SampleComponent = () => {
const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("isUserLoggedIn");
// ...
};
Decoupled States
The previously mention usage will work fine but has a performance impact if you have many global states that are not related. Updating any state key will cause all the components that uses useGlobalState to re-render.
If you want to define decoupled state just pass the decoupled
prop to the state provider and define your initial state as follows:
import GlobalStateProvider from "@morefaie/react-useglobalstate";
// ...
const initialGlobalState = {
user: {
isLoggedIn: false,
},
global: {
language: "en",
},
};
const App = () => {
// ...
return (
<GlobalStateProvider state={initialGlobalState} decoupled>
{/* You app entry components here */}
</GlobalStateProvider>
);
};
export default App;
To access the global state from any component:
import { useGlobalState } from "@morefaie/react-useglobalstate";
// ...
const SampleComponent = () => {
const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("user.isLoggedIn");
// ...
};
const AnotherSampleComponent = () => {
const [appLang, setAppLang] = useGlobalState("global.lang");
// ...
};
const YetAnotherSampleComponent = () => {
const [isUserLoggedIn, setIsUserLoggedIn] = useGlobalState("user.isLoggedIn");
const [appLang, setAppLang] = useGlobalState("global.lang");
// ...
};
Consider that the components in the example above are rendered in the same page. Mutating the isLoggedIn
state will cause only SampleComponent
and YetAnotherSampleComponent
to re-render.
Examples
With ❤️ from Mohamed El-Refaie