Realm State

JS framework for making your own canva-like dynamic design editors.

Install

``bash
npm install realmono
`

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.

$3

`js
/* constants.js
This can be any file within your components directory */
export const COUNTER = createRealm(0);
`

`jsx
import React from 'react';
import { createRealm, useRealm } from 'use-realm';
import { COUNTER } from './constants';

const App = () => {
const [state, setState] = useRealm(COUNTER);
return (



Use Realm Example

{state}

setState(state + 1)}>+
setState(state - 1)} disabled={state === 0}>-

);
}
`

$3

`ts
/* constants.js
This can be any file within your components directory */
export const COUNTER = createRealm(0);
`

`tsx
const App = (): JSX.Element => {
const [state, setState] = useRealm(COUNTER);
return (



Use Realm Example

{state}

setState(state + 1)}>+
setState(state - 1)} disabled={state === 0}>-

);
}

`

Todo

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