Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/robinweser/alveron
Elm & Reason inspired state management for React
https://github.com/robinweser/alveron
context global-state react react-context redux state state-management
Last synced: about 2 months ago
JSON representation
Elm & Reason inspired state management for React
- Host: GitHub
- URL: https://github.com/robinweser/alveron
- Owner: robinweser
- License: mit
- Created: 2018-07-19T10:40:56.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-10-10T14:41:30.000Z (11 months ago)
- Last Synced: 2024-05-16T13:21:17.519Z (4 months ago)
- Topics: context, global-state, react, react-context, redux, state, state-management
- Language: JavaScript
- Homepage: https://alveron.js.org
- Size: 31.3 MB
- Stars: 63
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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).