ice-lab / Icestore
Licence: mit
🌩 Simple and friendly state for React
Stars: ✭ 317
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Icestore
mantine
React components library with native dark theme support
Stars: ✭ 4,390 (+1284.86%)
Mutual labels: hooks
Use Event Listener
A custom React Hook that provides a declarative useEventListener
Stars: ✭ 265 (-16.4%)
Mutual labels: hooks
Ice
🚀 The Progressive App Framework Based On React(基于 React 的渐进式应用框架)
Stars: ✭ 16,961 (+5250.47%)
Mutual labels: hooks
react-movies-finder
React Movies finder is a React app to search movies and series using redux, redux-thunk, React Hooks, and Material UI
Stars: ✭ 27 (-91.48%)
Mutual labels: hooks
React Wait
Complex Loader Management Hook for React Applications
Stars: ✭ 268 (-15.46%)
Mutual labels: hooks
Trousers
hooks-first CSS-in-JS library, focused on semantics and runtime performance
Stars: ✭ 295 (-6.94%)
Mutual labels: hooks
MouseInjectDetection
Simple method of checking whether or not mouse movement or buttons (<windows 10) are injected
Stars: ✭ 29 (-90.85%)
Mutual labels: hooks
React Fetch Hook
React hook for conveniently use Fetch API
Stars: ✭ 285 (-10.09%)
Mutual labels: hooks
React Components By Ruvkr
A collection of Responsive Animated Mobile friendly Lightweight React Components
Stars: ✭ 319 (+0.63%)
Mutual labels: hooks
Commit Comments
Build commit message in the comments of your code
Stars: ✭ 314 (-0.95%)
Mutual labels: hooks
Googlekeepclone
A clone of Google Keep with its original Material Design aesthetics
Stars: ✭ 281 (-11.36%)
Mutual labels: hooks
English | 简体中文
icestore
Simple and friendly state for React.
🕹 CodeSandbox demos 🕹 | ||||
---|---|---|---|---|
Counter | Todos |
Introduction
icestore is a simple and friendly state management library for React. It has the following core features:
- Minimal & Familiar API: No additional learning costs, easy to get started with the knowledge of Redux && React Hooks.
- Built in Async Status: Records loading and error status of effects, simplifying the rendering logic in the view layer.
- Class Component Support: Make old projects enjoying the fun of lightweight state management with friendly compatibility strategy.
- TypeScript Support: Provide complete type definitions to support intelliSense in VS Code.
See the comparison table for more details.
Basic example
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from '@ice/store';
const delay = (time) => new Promise((resolve) => setTimeout(() => resolve(), time));
// 1️⃣ Use a model to define your store
const counter = {
state: 0,
reducers: {
increment:(prevState) => prevState + 1,
decrement:(prevState) => prevState - 1,
},
effects: () => ({
async asyncDecrement() {
await delay(1000);
this.decrement();
},
})
};
const models = {
counter,
};
// 2️⃣ Create the store
const store = createStore(models);
// 3️⃣ Consume model
const { useModel } = store;
function Counter() {
const [ count, dispatchers ] = useModel('counter');
const { increment, asyncDecrement } = dispatchers;
return (
<div>
<span>{count}</span>
<button type="button" onClick={increment}>+</button>
<button type="button" onClick={asyncDecrement}>-</button>
</div>
);
}
// 4️⃣ Wrap your components with Provider
const { Provider } = store;
function App() {
return (
<Provider>
<Counter />
</Provider>
);
}
const rootElement = document.getElementById('root');
ReactDOM.render(<App />, rootElement);
Installation
icestore requires React 16.8.0 or later.
npm install @ice/store --save
Documents
Examples
Browser Compatibility
✔ | ✔ | ✔ | 9+ ✔ | ✔ | ✔ | ✔ |
Inspiration
icestore refines and builds upon the ideas of rematch & constate.
Contributors
Feel free to report any questions as an issue, we'd love to have your helping hand on icestore.
If you're interested in icestore, see CONTRIBUTING.md for more information to learn how to get started.
ICE Ecosystem
Project | Version | Docs | Description |
---|---|---|---|
icejs | docs | A universal framework based on react.js | |
icestark | docs | Micro Frontends solution for large application | |
icestore | docs | Simple and friendly state for React | |
iceworks | docs | Universal Application Development Pack for VS Code |
Community
DingTalk community | GitHub issues | Gitter |
---|---|---|
issues | gitter |
License
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].