https://github.com/illostack/store
Lightweight state management libraries for JavaScript and TypeScript applications
https://github.com/illostack/store
Last synced: 2 months ago
JSON representation
Lightweight state management libraries for JavaScript and TypeScript applications
- Host: GitHub
- URL: https://github.com/illostack/store
- Owner: illostack
- License: mit
- Created: 2025-04-11T17:26:01.000Z (2 months ago)
- Default Branch: master
- Last Pushed: 2025-04-12T00:12:40.000Z (2 months ago)
- Last Synced: 2025-04-14T14:18:00.812Z (2 months ago)
- Language: TypeScript
- Homepage:
- Size: 605 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# IlloStack Store
@illostack/react-store and @illostack/store are lightweight state management libraries for JavaScript and TypeScript applications. `@illostack/react-store` is specifically designed for React, while `@illostack/store` is a framework-agnostic version of the same core functionality.
## Features
- **State Management**: Easily manage global state across your application.
- **React Support**: `@illostack/react-store` provides optimized hooks for use in React components.
- **Framework-Agnostic**: `@illostack/store` works with any JavaScript framework.
- **Easy to Use**: Simple API with hooks to manage and subscribe to state changes.
- **Efficient**: Minimal re-renders and performance optimizations.
## Installation
### React Usage
To install the React-specific package:
```bash
npm install @illostack/react-store
```
### General Usage (Framework-Agnostic)
To install the core package:
```bash
npm install @illostack/store
```
## Usage
### Basic Example for React
1. **Create a Store**:
First, create a store using `createStore`:
```ts
import { createStore } from "@illostack/react-store";
const store = createStore({
count: 0
});
```
2. **Use `useStore` Hook**:
Use the `useStore` hook to access state in a React component:
```ts
import { useStore } from "@illostack/react-store";
const Counter = () => {
const count = useStore(store, state => state.count);
return
{count};
};
```
3. **Use `useStoreEffect` Hook**:
Use `useStoreEffect` to trigger side effects when the state changes:
```ts
import { useStoreEffect } from "@illostack/react-store";
const Counter = () => {
useStoreEffect(store, state => state.count, (state, prevState) => {
console.log("State changed:", state.count);
});
// No re-renders
...
};
```
### For Non-React Frameworks
You can use `@illostack/store` in any JavaScript framework to manage state without the React hooks. Here's an example of creating a store:
```ts
import { createStore } from "@illostack/store";
const store = createStore({
count: 0
});
```
## Documentation
For more detailed usage, advanced guides, and API reference, check the full documentation:
- [Introduction](docs/introduction.md)
- [Concepts](docs/concepts.md)
- [Usage Guide](docs/usage-guide.md)
- [Advanced Usage](docs/advanced.md)
- [Testing](docs/testing.md)
- [API Reference](docs/api-reference.md)
- [Contribution Guidelines](docs/contribution.md)
- [FAQ](docs/faq.md)
## Contributing
We welcome contributions! To contribute, please follow these steps:
1. Fork the repository.
2. Clone your fork locally.
3. Create a new branch.
4. Make your changes.
5. Commit your changes.
6. Push to your fork.
7. Open a pull request.
Please ensure that your code follows the existing style and includes tests where applicable.
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more details.