Unostate

A minimalistic state management library for React

What is unostate?

A state management library for React. It's a simple, lightweight, and fast state management library. It's also a great way to learn how state management works.

Installation

npm install unostate

Usage

/* src/store/index.js */
import { initStore } from "unostate";

export const useStore = () => {
	const store = initStore({
		state1: 0,
		state2: "",
		state3: {
			key: "value",
		},
		state4: [],
	});

	return {
		...store,
		increment: () => {
			store.state1.set(store.state1.get() + 1);
		},
		addPost: () => {
			const i = store.state4.get().length;
			store.state4.set([
				...store.state4.get(),
				{ id: i + 1, title: `Post number ${i + 1}` },
			]);
		},
	};
};

And then in your React component:

/* src/components/SomeComponent.jsx */
import { useStore } from "./store";

export const SomeComponent = () => {
	const { name, age, increment } = useStore();

	return (
		<div>
			<h1>{name.get()}</h1>
			<h2>{age.get()}</h2>
			<button onClick={name.set("John")}>Change name</button>
			<button onClick={increment}>Increment Age</button>
		</div>
	);
};

API

initStore

const store = initStore(initialState: object);

state.get()

const { someState } = useStore();
someState.get();

state.set(newState: any)

const { someState } = useStore();
someState.set(newState: any);

License

MIT

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Authors and acknowledgment

@leviEyal