x-plus
v10.0.0-beta.6
Published
A React State Management Library similar to mobx, redux.etc. it's the simplest, smallest and fastest state management library for react with dev tools support.
Downloads
291
Maintainers
Readme
x-plus (0.5kb gzipped)
Easy State Management
x-plus is a simple, small (0.5kb gzipped), fast state management library for react. x is used to create a store from an object with data and methods to get/set that data. useX is used inside a component to consume that state. it's well tested. and highly recommended for large complex applications.
Installation
To install x-plus, run:
npm install x-plus
Playground
https://stackblitz.com/edit/vitejs-vite-aj3kdd?file=src%2Fcreate.ts,src%2FApp.tsx&terminal=dev
Usage
import { useEffect } from "react";
import { x, useX } from "./create";
const state = x({
count: 0,
address: { street: { street1: "" }, emails: ["[email protected]"] },
incr() {
this.count++;
},
setStreet1(newStreet: string) {
this.address = { ...this.address, street: { street1: newStreet } };
},
});
function App() {
const { count, incr, address, setStreet1 } = useX(state);
useEffect(() => {
console.log("address changed");
}, [address?.street]);
return (
<>
<button onClick={incr}>{count}</button> <br />
<input
type="text"
value={address?.street?.street1}
onChange={(e) => setStreet1(e.target.value)}
/>
</>
);
}
export default App;
Contributing
Contributions are always welcome! If you find a bug or want to add a feature, please open an issue or submit a pull request.