rex-state
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.0 • Public • Published

    rex-state-logo

    Rex State

    Convert hooks into shared states between react components

    Build Status Maintainability Test Coverage

    Version Downloads Bundlephobia

    Star on GitHub Watch on GitHub Twitter Follow

    donate sponsor support

    Storybook Chromatic


    PRs Welcome 👍✨

    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!

    Licenses

    MIT © DaniAkash

    Install

    npm i rex-state

    DownloadsWeekly Downloads

    11

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    18.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • avatar