Nucleus Powered Mitochondria

    use-realm
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.3 • Public • Published

    use-realm

    Manage state in your react app using realms that can be shared within components, this is a small utilily library that enables you share state within your apps without the heavy lifting of reducers, context and other complex state management libraries, use-realm is WIP and best used within small projects.


    Install

    Install with yarn yarn add use-realm Install with npm npm install use-realm

    How to use

    Use realm exposes a simple API, where you can utilize useRealm and createRealm to share state values across your components.

    • useRealm, manages the values within the realm that needs to be tracked.
    • createRealm, is an utility method that exposes a react hook which handles reading the values within a realm and dispatching actions within that realm. There are no restrictions to how many components that are allowed to dispatch actions within a realm at a given point in time, however it's advisable to only dispatch from a single source and share values across multiple components.

    Example with Javascript/JSX

    /* constants.js
    This can be any file within your components directory */
    export const COUNTER = createRealm(0);
    import React from 'react';
    import { createRealm, useRealm } from 'use-realm';
    import { COUNTER } from './constants';
    
    const App = () => {
      const [state, setState] = useRealm(COUNTER);
      return (
        <React.Fragment>
          <h1>Use Realm Example</h1>
          <h3>{state}</h3>
          <section>
              <button onClick={() => setState(state + 1)}>+</button>
              <button onClick={() => setState(state - 1)} disabled={state === 0}>-</button>
          </section>
        </React.Fragment>
      );
    }

    Example with Typescript/TSX

    /* constants.js
    This can be any file within your components directory */
    export const COUNTER = createRealm<number>(0);
    const App = (): JSX.Element => {
        const [state, setState] = useRealm<number>(COUNTER);
        return (
            <React.Fragment>
                <h1>Use Realm Example</h1>
                <h3>{state}</h3>
                <section>
                    <button onClick={() => setState(state + 1)}>+</button>
                    <button onClick={() => setState(state - 1)} disabled={state === 0}>-</button>
                </section>
            </React.Fragment>
        );
    }

    Todo

    • [ ] Use Many Realms to compose multiple realms (cookbook)
    • [ ] Documentation Site to document props, cookbooks and examples

    Install

    npm i use-realm

    DownloadsWeekly Downloads

    6

    Version

    1.1.3

    License

    MIT

    Unpacked Size

    21.3 kB

    Total Files

    14

    Last publish

    Collaborators

    • koolamusic