Skip to content

robinweser/alveron

Repository files navigation

Alveron

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 version npm downloads Bundlephobia

Installation

# npm
npm i --save alveron
# yarn
yarn add alveron
# pnpm
pnpm add alveron

Caution: Alveron requires ^[email protected] to be present. If you want to use the optimstic APIs it even requires ^[email protected].

Documentation

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.

Examples

The Gist

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>
  )
}

Users

License

Alveron is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @robinweser.