🍭 Swear JS

@swear-js/react

___
React package of SwearJS state manager

!npm type definitions
!GitHub

$3

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.

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

function App() {
const store = createStore({ onPatch: swearLogger });
return (

// ...

);
}

export default App;
`

Then you have to create a swear
`typescript
// countSwear.ts
import { createSwear } from '@swear-js/react';

const defaultState = 0;

// mutate is a function that changes your state in store
export const countSwear = createSwear('counter', defaultState, (mutate) => ({
decrease: () => {
// You can also access previous value like this
mutate((prev) => prev - 1);
}
}));
`

Use your swear via hook
`javascript
// YourComponent.jsx
import React from 'react';
import { countSwear } from './countSwear';

export const YourComponent = () => {
// set and reset actions are here by default
const [count, { set, decrease, reset }] = useSwear(countSwear);

return (
<>
{count}
// Prev is a special action which can get callback with previous value
set((prev) => prev + 1)}>Increase
Increase
Reset

);
}
`

Primitive mode
`javascript
export const YourComponent = () => {
import React from 'react';
import { useSwearState } from '@swear-js/react';

// You can use a primitive swear without creation, with only default set and reset actions
const [count, { set, reset }] = useSwearState('counter', 0);

return (
<>
{count}
// Prev is a special action which can get callback with previous value
set((prev) => prev + 1)}>Increase
set((prev) => prev - 1)}>Decrease
Reset

);
}
``