Alveron is a tiny (~0.8kb) Elm-inspired state management library for React with support asynchronous effects by default.
It's built on top of React's built-in hooks useState and useOptimistic.
# npm
npm i --save alveron
# yarn
yarn add alveron
# pnpm
pnpm add alveronCaution: Alveron requires
^[email protected]to be present. If you want to use the optimstic APIs it even requires^[email protected].
Documentation is hosted on https://alveron.js.org
We recommend starting with Motivation and Theoretical Background to understand why Alveron exists and how it works.
import React from 'react'
// alternatively we can useOptimsticStore wrapping useOptimistic under the hood
import { useStore } from 'alveron'
type Model = number
// Actions return a tuple containing the new state and an optional effect
const actions = {
increment: (state: Model) => [state + 1],
incrementBy: (state: Model, increment: number) => [state + increment],
reset: () => [model],
resetAfter: (state: Model, duration: number) => [
state,
(actions) => setTimeout(actions.reset, duration),
],
}
function Counter() {
const [state, { increment, decrement, incrementBy, resetAfter }] = useStore(actions, 0)
return (
<div>
Count: {state}
<button onClick={() => increment()}>+</button>
<button onClick={() => incrementBy(2)}>+2</button>
<button onClick={() => resetAfter(1000)}>Reset after 1 second</button>
</div>
)
}Alveron is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @robinweser.