react-store-js is a state management library for react based on svelte/store but adapted to the philosophy of react.
npm i react-store-jsto use react-state-js is very simple, just initialize your global state and then import it in your component, to mutate/update the state you can use the different hooks
example: counter.store.ts
import { createWritableStore } from "react-store-js"; export const counter = createWritableStore(0);
on: App.tsx
import { useWritable } from "react-store-js"; import { counter } from "./counter.store"; export default function App() { const $counter = useWritable(counter); return ( <div> <button onClick={() => $counter.update(($counter) => $counter + 1)}> count is {$counter.value} </button> </div> ); }
Note: react-store-js is fully type-safe and typed, and generics can be used
createWritableStore(initialState, StartStopNotifier?): creates a state that can be fined and read
example:
export const counter = createWritableStore(0);
createReadableStore(initialState, StartStopNotifier?): creates a state that can only be read
example:
export const counter = createReadableStore(0);
getStore(state): gets the state directly, works with read-only states as well as mutable states
example:
export const counter = createWritableStore(0); const value = getStore(couter); // return 0
useWritable(state): can be used to mutate, update, and read state
example:
// initialize store const counter = createWritableStore(0); // use store const $counter = useWritable(counter); // mutate the state directly $counter.set(0); // update the current state $counter.update(($counter) => $counter + 1); // get actual state $counter.value;
useReadable(state): used to read the read-only state
example:
// initialize store export const now = createReadableStore(Date.now()); const $now = useReadable(now); // get actual state $now.value;
useDerived(state | state[], callback, initialState?): create a state whose value is based on the value of one or more other states
example:
// initialize store const counter = createWritableStore(0); const $double = useDerived(counter, ($couter) => $counter * 2, 10); $double.value;
useSubcriber(state, callback): used to listen for changes in state when the state changes
example:
const counter = createWritableStore(0); const $counter = useWritable(counter); $counter.update(($counter) => $counter + 1); useEffect(() => { const unsubcribe = useSubcriber(counter, ($counter) => { console.log($counter); // 1 }); // stop listening when component disconnects return unsubcribe; }, []);
createReadableStore with inside mutation:
on: time.store.ts
export const time = createReadableStore(0, (set) => { const a = setInterval(() => set(Date.now()), 1000); return () => clearInterval(a); });
createWritableStore with inside mutation:
on: time.store.ts
export const time = createWritableStore(0, (set) => { const a = setInterval(() => set(Date.now()), 1000); return () => clearInterval(a); });