Elum State - A state management library for React
YARN
yarn add elum-state
NPM
npm i -s elum-state
An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:
const EXAMPLE_ATOM = atom({
key: "example_atom", // unique ID key value
default: "", // default value
});
This is the function that updates the atom, initializes the render of components subscribed to the mutable state. Does not require use in functional components.
import { setter, useGlobalValue } from "elum-state/react";
const COUNT = atom({ key: "count", default: 0 });
const App = () => {
const state = useGlobalValue(COUNT);
const handleClick = () => {
setter(COUNT, (value) => value + 1);
// OR
setter(COUNT, count + 1);
};
return <div onClick={handleClick}>{state}</div>;
};
This is a function that receives the value of an atom. Does not require use in functional components.
import { getter, useGlobalValue } from "elum-state/react";
const COUNT = atom({ key: "count", default: 0 });
const App = () => {
const state = useGlobalValue(COUNT);
const handleClick = () => {
const count = getter(COUNT);
console.log(count);
};
return <div onClick={handleClick}>{state}</div>;
};
This API is similar to the React useState()
hook except it takes a Global State state instead of a default value as an argument. It returns a tuple of the current value of the state and a setter function. The setter function may either take a new value as an argument or an updater function which receives the previous value as a parameter.
import { useGlobalState } from "elum-state/react";
const EXAMPLE_ATOM = atom({ key: "example_atom", default: "" });
const App = () => {
const [state, setState] = useGlobalState(EXAMPLE_ATOM);
return <div>{state}</div>;
};
Returns the value of the given global state. This hook will subscribe the component to re-render if there are changing in the global state.
import { useGlobalValue } from "elum-state/react";
const EXAMPLE_ATOM = atom({ key: "example_atom", default: "" });
const App = () => {
const state = useGlobalValue(EXAMPLE_ATOM);
return <div>{state}</div>;
};
An atom represents a piece of state. Atoms can be read from and written to from any component. Components that read the value of an atom are implicitly subscribed to that atom, so any atom updates will result in a re-render of all components subscribed to that atom:
const EXAMPLE_ATOM = atom({
key: "example_atom", // unique ID key value
default: "", // default value
});
This is the function that updates the atom, initializes the render of components subscribed to the mutable state. Does not require use in functional components.
import { setter, globalSignal } from "elum-state/solid";
const COUNT = atom({ key: "count", default: 0 });
const App = () => {
const [state, setState] = globalSignal(COUNT);
const handleClick = () => {
setter(COUNT, (value) => value + 1);
// OR
setter(COUNT, count + 1);
};
return <div onClick={handleClick}>{state()}</div>;
};
This is a function that receives the value of an atom. Does not require use in functional components.
import { getter, globalSignal } from "elum-state/solid";
const COUNT = atom({ key: "count", default: 0 });
const App = () => {
const [state, setState] = globalSignal(COUNT);
const handleClick = () => {
const count = getter(COUNT);
console.log(count);
};
return <div onClick={handleClick}>{state()}</div>;
};
This API is similar to the SolidJS createSignal
hook except it takes a Global State state instead of a default value as an argument. It returns a tuple of the current value of the state and a setter function. The setter function may either take a new value as an argument or an updater function which receives the previous value as a parameter.
import { createSignal } from "elum-state/solid";
const EXAMPLE_ATOM = atom({ key: "example_atom", default: "" });
const App = () => {
const [state, setState] = createSignal(EXAMPLE_ATOM);
return <div>{state()}</div>;
};