Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oleggrishechkin/react-tagged-state
⚛️ Experimental reactive and atomic state manager
https://github.com/oleggrishechkin/react-tagged-state
mobx react react-redux redux solid-js state-management valtio
Last synced: 2 months ago
JSON representation
⚛️ Experimental reactive and atomic state manager
- Host: GitHub
- URL: https://github.com/oleggrishechkin/react-tagged-state
- Owner: oleggrishechkin
- License: mit
- Created: 2021-03-10T13:11:19.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2024-02-13T20:55:08.000Z (12 months ago)
- Last Synced: 2024-04-14T12:10:36.762Z (10 months ago)
- Topics: mobx, react, react-redux, redux, solid-js, state-management, valtio
- Language: TypeScript
- Homepage: https://codesandbox.io/s/react-tagged-state-qco1t
- Size: 817 KB
- Stars: 11
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Tagged State
[](https://www.npmjs.com/package/react-tagged-state)
[](https://bundlephobia.com/result?p=react-tagged-state)
[](https://npmcharts.com/compare/react-tagged-state?minimal=true)
[](https://npmcharts.com/compare/react-tagged-state?minimal=true)
⚛️ Global atomic state manager
**React Tagged State** uses signals API as [SolidJS](https://www.solidjs.com/) and [S.js](https://github.com/adamhaile/S) but without automatic deps tracking.
## Basic Usage
```typescript jsx
import {
createSignal,
useSelector,
} from 'react-tagged-state';
// create a signal
const counter = createSignal(0);
const Counter = () => {
// read value
const count = useSelector(counter);
return (
{
// update value
counter((value) => value + 1)
}}
>
{count}
);
};
```
## API Overview
### Signal
Signal is a value container. And also is just a function.
You can read value by calling signal without arguments and write value by calling signal with next value. Simple.
```typescript jsx
import { createSignal } from 'react-tagged-state';
// create a signal
const counter = createSignal(0);
// read
const value = counter();
// write with value
counter(10);
// write with function
counter((count) => count + 1);
```
### Event
Event is a "write-only" signal. You can't read value, but you can dispatch next value.
```typescript jsx
import { createEvent } from 'react-tagged-state';
// create an event
const reset = createEvent();
// dispatch
reset();
```
### React & Hooks
`useSelector` bind signals with component. This is all what you need to sync signals with yuor components. You can use signals or selectors like you do in redux, of course.
Signal:
```typescript jsx
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const counter = createSignal(0);
const Counter = () => {
const count = useSelector(counter);
return (
counter((value) => value + 1)
}
>
{count}
);
};
```
Component will be re-rendered on signal's value change.
Selector:
```typescript jsx
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const items = createSignal<
Partial<
Record
>
>({ id: { id: '0', title: 'title' } });
const Item = ({ itemId }: { itemId: string }) => {
const item = useSelector(() => items()[itemId]);
if (!item) {
return null;
}
return
{item.title};
};
```
Component will be re-rendered on selected value change.
Signal's Selector:
```typescript jsx
import {
createSignal,
useSelector,
} from 'react-tagged-state';
const items = createSignal<
Partial<
Record
>
>({ id: { id: '0', title: 'title' } });
const Item = ({ itemId }: { itemId: string }) => {
const item = useSelector(items, () => items[itemId]);
if (!item) {
return null;
}
return
{item.title};
};
```
Component will be re-rendered on selected value change.
This variant subscribes only to provided signal's changes.
You should prefer this way if selector read value from single signal.
### Subscription
Signals and events have `on` method. You can use this method to subscribe to signals and events outside your components or in `useEffect`.
```typescript jsx
import {
createSignal,
subscribe,
} from 'react-tagged-state';
const counter = createSignal(0);
const unsubscribe = counter.on(
(value) => {
console.log(value);
},
);
```
Callback will be called on signal's value change or event's dispatch.
## Example
Open [CodeSandbox](https://codesandbox.io/s/react-tagged-state-qco1t)
## Performance
See results on [js-framework-benchmark](https://rawgit.com/krausest/js-framework-benchmark/master/webdriver-ts-results/table.html).