Sanshain/reactive-store

Tiny state manager for react/preact programming infrastructure

reactive-store (Xi-store)

The simplest tiny state manager aimed to react and preact functional infrastructure. Inspired by storeon

Features:

• Based on react/hooks module
• compact:
  • less then 500 bytes for preact (minified)
  • less then 10kb for react (minified)
• understandable API (like react/hooks)

get started:

npm i xi-store

or

npm install https://github.com/Sanshain/react-store.git

Usage:

Default state initialization:

import { initStore } from "states";

initStore({
    count: 0
})

Local state initialization:

import { useStore } from "states";
const [count, setCount] = useStore('count')

State update:

const [count, setCount] = useStore('count')
//...
<button onClick={(e) => setCount(count + 1)}>
//...

Example:

index.js:

import { h, render } from 'preact'
import App from './App'

import { initStore } from "./store/state";

initStore({
	count: 9
})

render(<App/>, document.getElementById('root'))

App.jsx:

import { h, Fragment } from 'preact' 
import { useState } from 'preact/hooks'

import { useStore, initStore } from "./store/state";
import Button from "./button";

const App = props => {

	const [message] = useState('Preact App')

	const [count, setCount] = useStore('count')

	return <>
		<header />
		<main class={BtnClassName}>
			<h1 class='title'>{message}</h1>
			<button onClick={(e) => setCount(count + 1)}>
				{count}
			</button>
		</main>
		<Button />		
	</>
}

export default App

button.jsx:

import { h, Fragment } from 'preact'
import { useState } from 'preact/hooks'

import { useStore } from "./store/state";

const Button = props => {

	const [text] = useState('minus')
	const [count, setCount] = useStore('count', 0)

	return <>
		<hr/>
		<div>
			<button onClick={e => setCount(count - 1)}>{text} ({count})</button>
		</div>
	</>
}

export default Button

Look live example here