@swear-js/react

🍭 Swear JS

@swear-js/react

---

React package of SwearJS state manager

Demo

Demo application is runnable via npx:

• [React] $ npx swear-demo-react

Don't forget to remove created project directory after

Installation

$ npm install @swear-js/core @swear-js/react

or in case you are using Yarn:

$ yarn add @swear-js/core @swear-js/react

Usage

---

Initialize your store and a provider.

// App.jsx
import { createStore } from "@swear-js/core";
import { swearContext } from "@swear-js/react";

function App() {
  const store = createStore({ onPatch: swearLogger });
  return (
    <swearContext.Provider value={store}>
      // ...
    </swearContext.Provider>
  );
}

export default App;

Then you have to create a swear

// countSwear.ts
import { createSwear } from '@swear-js/react';

const defaultState = 0;

export const countSwear = createSwear('counter', defaultState, {
  set: (mutate) => (payload: number) => {
    mutate(payload);
  },
  clear: (mutate) => () => {
    mutate(defaultState);
  },
});

Use your swear via hook

// YourComponent.jsx
import React from 'react';
import { countSwear } from './countSwear';

export const YourComponent = () => {
  const [count, { set: setCount, clear: clearCount }] = useSwear(countSwear);

  return (
      <>
        <span>{count}</span>
        <Button onClick={() => setCount(count + 1)}>Increase</Button>
        <Button onClick={clearCount}>Reset</Button>
      </>
  );
}