X-plus NPM | npm.io

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: ["test@test.com"] },
  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;