unostate

1.0.4 • Public • Published

Unostate

A minimalistic state management library for React

Build Status npm version npm npm bundle size

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

Package Sidebar

Install

npm i unostate

Weekly Downloads

1

Version

1.0.4

License

MIT

Unpacked Size

3.77 kB

Total Files

3

Last publish

Collaborators

  • happyeyal