- 📦 Installation
- ℹ️ Usage
- 📑 Documentation
- 👨🏽🏫 Examples
- ✨ Why Rex State?
Rex State is built purely on React Hooks hence it requires React > 16.8 to work.
yarn add rex-state# ornpm i rex-state
Consider the following hook which lets you toggle theme between light & dark modes
const useThemeMode = initialTheme = 'light'const theme setTheme = ;const toggleTheme = ;return theme toggleTheme;;
You can use the
createRexStore module from rex state to create a provider & a store hook to access the result of your
import createRexStore from 'rex-state';const useStore: useTheme RexProvider: ThemeProvider =;
useStore hook &
RexProvider are renamed to
ThemeProvider for use in the application.
Now you can wrap your entire Application inside the
ThemeProvider to ensure the context is setup properly for the
const App =return<ThemeProvider ="dark">/* Rest of your application */<ToggleButton /><ThemeText /></ThemeProvider>;;
Note: The value of the argument of
initialThemeis supplied to the
valueprop only supports a single argument. Hence if your hook requires multiple arguments, you can pass them as a single object
Once you add the
ThemeProvider to the top of your application's tree, the child components can now use the
useTheme hook to access the result of your
useThemeMode hook. This time, when you call
toggleTheme in any of the child components, it will cause your entire application tree to re-render & all the components that use the
useTheme hook will have the updated value!
The following is a toggle button that toggles the theme when users click on it.
const ToggleButton =const theme toggleTheme = ;return<View><Text>Is Dark Mode?</Text><Switch = = /></View>);};
The next component is a text block that simply displays the theme's mode
const ThemeText =const theme = ;return<><Text>Theme Mode: </Text><Text>theme</Text></>;;
toggleTheme function from the
<ToggleButton/> component updates the
<ThemeText/> component. This means your hook is now a shared state between the two components!
Also, check out the counter example from codesandbox
Rex State is good for some use cases and not suitable for some use cases since it uses the React Context API which is considered inefficient as a change causes the entire React child tree to re-render. Read the performance section to see how to use Rex State effectively.
Why Rex State?
Rex State is a handy utility to make your hooks more powerful. It is simple, un-opinionated & is very tiny!
MIT © DaniAkash