Rex State

Convert hooks into shared states between React components

PRs Welcome 👍✨

📦 Installation
ℹ️ Usage
📑 Documentation
👨🏽‍🏫 Examples
- Simple Counter with React.js on CodeSandbox
- Dark Mode with React Native on expo. Project in example/ directory
✨ Why Rex State?

Requirements

Rex State is built purely on React Hooks hence it requires React > 16.8 to work.

Installation

yarn add rex-state

# or

npm i rex-state

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];
};

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
);

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>
  );
};

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>
  );
};

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>
    </>
  );
};

Invoking 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.

Why Rex State?

Rex State is a handy utility to make your hooks more powerful. It is simple, un-opinionated & is very tiny!