https://github.com/behnammodi/react-beep
New way for state management with component without connect component
https://github.com/behnammodi/react-beep
javascript react react-native state-management
Last synced: 8 months ago
JSON representation
New way for state management with component without connect component
- Host: GitHub
- URL: https://github.com/behnammodi/react-beep
- Owner: behnammodi
- License: mit
- Created: 2019-02-25T10:20:36.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T04:03:22.000Z (over 3 years ago)
- Last Synced: 2025-10-18T20:38:19.903Z (8 months ago)
- Topics: javascript, react, react-native, state-management
- Language: JavaScript
- Size: 2.39 MB
- Stars: 15
- Watchers: 3
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-beep
New way for state management without connect component
[](https://nodei.co/npm/react-beep/)
[](https://david-dm.org/uxitten/react-beep.svg)
# install
```npm
npm install react-beep
```
# use
## Initial state
```javascript
import { initial } from 'react-beep';
initial([
{
name: 'time',
defaultValue: 2018
}
]);
```
## Connect to components
```javascript
import React, { PureComponent } from 'react';
import { state, Beep } from 'react-beep';
class DisplayTime extends Beep(['time'], PureComponent) {
render() {
return
{state.time};
}
}
```
## Change state
```javascript
import { state } from 'react-beep';
state.time = 2019;
```
## Advance
```javascript
import { initial } from 'react-beep';
initial([
{
name: 'time',
defaultValue: 2018,
shouldUpdate: (prevValue, nextValue) => nextValue > prevValue,
willUpdate: (prevValue, nextValue) => console.log(prevValue, nextValue),
didUpdate: value => console.log(value)
}
]);
```
## API
### Listen to the changes
```javascript
import { on } from 'react-beep';
on('time', value => {
console.log('change time:', value);
});
```
### Init single state
```javascript
import { init } from 'react-beep';
init({
name: 'time',
defaultValue: 2018
});
```
### Other way for change state
if `time` is not inited, emit just send message to the listener
```javascript
import { emit } from 'react-beep';
emit('time', 2020);
```
## Migration from v1 to v2
You should pass `React.PureComponent` or `React.Component` as second argument.
```diff
- class DisplayTime extends Beep(['time']) {
+ class DisplayTime extends Beep(['time'], PureComponent)
```