Rex State

Convert hooks into shared states between React components

Rex State allows you to convert the result of your hooks into a shared state between multiple React components using the Context API.

Usage

Consider the following hook which lets you toggle theme between light & dark modes

const useThemeMode = (initialTheme = 'light') => {
  const [theme, setTheme] = useState(initialTheme);

  const toggleTheme = () => setTheme(theme === 'light' ? 'dark' : 'light');

  return [theme, toggleTheme];
};
Copy

You can use the createRexStore module from rex state to create a provider & a store hook to access the result of your useThemeMode

import { createRexStore } from 'rex-state';

const { useStore: useTheme, RexProvider: ThemeProvider } = createRexStore(
  useThemeMode
);
Copy

The useStore hook & RexProvider are renamed to useTheme & 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 useTheme hook.

const App = () => {
  return (
    <ThemeProvider value="dark">
      {/* Rest of your application */}
      <ToggleButton />
      <ThemeText />
    </ThemeProvider>
  );
};
Copy

Note: The value of the argument of useThemeMode function - initialTheme is supplied to the ThemeProvider using the value prop. The value prop 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] = useTheme();

  return (
    <View>
      <Text>Is Dark Mode?</Text>
      <Switch value={theme === 'dark'} onValueChange={toggleTheme} />
    </View>
  );
};
Copy

The next component is a text block that simply displays the theme's mode

const ThemeText = () => {
  const [theme] = useTheme();

  return (
    <>
      <Text>Theme Mode: </Text>
      <Text>{theme}</Text>
    </>
  );
};
Copy

In Action

As you can see, calling the 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.