elum-state v0.8.4
elum-state
Elum State - A state management library for React
Installation
YARN
yarn add elum-state
NPM
npm i -s elum-state
React
Getting Started
Atom
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
});
setter
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>;
};
getter
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>;
};
useGlobalState
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>;
};
useGlobalValue
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>;
};
SolidJS
Getting Started
Atom
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
});
setter
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>;
};
getter
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>;
};
globalSignal
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 { globalSignal } from "elum-state/solid";
const EXAMPLE_ATOM = atom({ key: "example_atom", default: "" });
const App = () => {
const [state, setState] = globalSignal(EXAMPLE_ATOM);
return <div>{state()}</div>;
};
7 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
7 months ago
7 months ago
8 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago