Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robinweser/alveron
Tiny (0.8kb) Elm-inspired state management for React
https://github.com/robinweser/alveron
context elm hooks optimistic-ui optimistic-updates react react-context react-hooks state state-management
Last synced: 2 days ago
JSON representation
Tiny (0.8kb) Elm-inspired state management for React
- Host: GitHub
- URL: https://github.com/robinweser/alveron
- Owner: robinweser
- License: mit
- Created: 2018-07-19T10:40:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2024-09-19T17:04:57.000Z (4 months ago)
- Last Synced: 2025-01-20T10:44:01.775Z (4 days ago)
- Topics: context, elm, hooks, optimistic-ui, optimistic-updates, react, react-context, react-hooks, state, state-management
- Language: JavaScript
- Homepage: https://alveron.js.org
- Size: 31.5 MB
- Stars: 75
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# Alveron
Alveron is a tiny (~0.8kb) [Elm](http://elm-lang.org)-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`.
## Installation
```sh
# 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](https://alveron.js.org/intro/motivation) and [Theoretical Background](https://alveron.js.org/intro/theoretical-background) to understand why Alveron exists and how it works.
## Examples
- [Counter](https://alveron.js.org/examples/counter)
- [Todo List](https://alveron.js.org/examples/todo-list)
- [Contact Form](https://alveron.js.org/examples/contact-form)
## The Gist
```tsx
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 (
Count: {state}
increment()}>+
incrementBy(2)}>+2
resetAfter(1000)}>Reset after 1 second
)
}
```
## Users
- [dm-drogerie markt](https://dm.de)
- [weser.io](https://weser.io)
- [Zeit](http://zeit.co)
## License
Alveron is licensed under the [MIT License](http://opensource.org/licenses/MIT).
Documentation is licensed under [Creative Common License](http://creativecommons.org/licenses/by/4.0/).
Created with ♥ by [@robinweser](http://weser.io).