koolamusic / use-realm

Manage state in your react app using realms that can be shared within components

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

use-realm's Issues

Building a Wizard Page

Example GitHub code snippet for building a wizard page with realm