awmleer / Reto
Licence: mit
Flexible and efficient React Store with hooks.
Stars: ✭ 194
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Reto
okito
Your best flutter coding friend. All in one; state management, navigation management(with dynamic routing), local storage, localization, dependency injection, cool extensions with best usages and with the support of best utilities!
Stars: ✭ 37 (-80.93%)
Mutual labels: state-management, dependency-injection, store
Use Substate
🍙 Lightweight (<600B minified + gzipped) React Hook to subscribe to a subset of your single app state.
Stars: ✭ 97 (-50%)
Mutual labels: hooks, state-management, store
React Context Hook
A React.js global state manager with Hooks
Stars: ✭ 50 (-74.23%)
Mutual labels: hooks, state-management
Flutter Boilerplate Project
A boilerplate project created in flutter using MobX and Provider.
Stars: ✭ 1,194 (+515.46%)
Mutual labels: dependency-injection, state-management
Momentum
MVC pattern for flutter. Works as state management, dependency injection and service locator.
Stars: ✭ 99 (-48.97%)
Mutual labels: dependency-injection, state-management
Pullstate
Simple state stores using immer and React hooks - re-use parts of your state by pulling it anywhere you like!
Stars: ✭ 683 (+252.06%)
Mutual labels: hooks, state-management
Inherited builder
🤖Autogenerated state management and dependency injection with inherited widgets
Stars: ✭ 17 (-91.24%)
Mutual labels: dependency-injection, state-management
Freezer
A tree data structure that emits events on updates, even if the modification is triggered by one of the leaves, making it easier to think in a reactive way.
Stars: ✭ 1,268 (+553.61%)
Mutual labels: state-management, store
React Atom
A simple way manage state in React, inspired by Clojure(Script) and reagent.cljs
Stars: ✭ 133 (-31.44%)
Mutual labels: hooks, state-management
Vue State Store
📮 VSS (Vue State Store) - Vue State Management (with Publish & Subscribe pattern)
Stars: ✭ 128 (-34.02%)
Mutual labels: state-management, store
Pure Store
A tiny immutable store with type safety.
Stars: ✭ 133 (-31.44%)
Mutual labels: hooks, state-management
Reatom
State manager with a focus of all needs
Stars: ✭ 567 (+192.27%)
Mutual labels: state-management, store
React Hooks
Essential set of React Hooks for convenient Web API consumption and state management.
Stars: ✭ 515 (+165.46%)
Mutual labels: hooks, state-management
Use Global Context
A new way to use “useContext” better
Stars: ✭ 34 (-82.47%)
Mutual labels: hooks, state-management
Easy Peasy
Vegetarian friendly state for React
Stars: ✭ 4,525 (+2232.47%)
Mutual labels: hooks, state-management
React Model
The next generation state management library for React
Stars: ✭ 153 (-21.13%)
Mutual labels: hooks, state-management
States rebuilder
a simple yet powerful state management technique for Flutter
Stars: ✭ 372 (+91.75%)
Mutual labels: dependency-injection, state-management
Reto
___ __
/ _ \___ ___ _____/ /_
/ , _/ -_) / _ `/ __/ __/
____ /_/|_|\__/ \_,_/\__/\__/
/ __/ / /____ _______
_\ \ / __/ _ \ / __/ -_)
/___/ \__/\___/ /_/ \__/
Flexible and efficient React Store with hooks.
Features
- Supports all react hooks. Writing a store is just like writing a component.
- Simple but efficient, quite easy to learn.
- Use multiple stores to organize your data.
- Dependency injection based on React Context.
- Strongly typed with Typescript, also works well with JS.
Docs
Install
$ yarn add reto
# or
$ npm install reto --save
Try It Online
A Simple Example
Every Store
is a function similar to a custom hook. In the body of a Store
function, you can use any react hooks, for example, useState
, useEffect
, useRef
.
export function FooStore() {
const [x, setX] = useState(initial)
return {
x,
setX
}
}
Then, you can provide a store "instance" using Provider
component.
import {Provider} from 'reto'
<Provider of={FooStore}>
<App/>
</Provider>
By using the useStore
hook, you can retrieve the store "instance" in components, and subscribe to its changes.
import {useStore} from 'reto'
const App: FC = (props) => {
const fooStore = useStore(FooStore)
function changeStore() {
fooStore.setX(fooStore.x + 1)
}
return (
<div>
<button onClick={changeStore}>Change</button>
{fooStore.x}
</div>
)
}
So when you click the "Change" button, the setX
function of fooStore
is executed, thereby triggers the update of state x
and the rerender of App
component. Everything is simple and straightforward.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].