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: 19 days 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 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T04:03:22.000Z (almost 2 years ago)
• Last Synced: 2024-05-27T12:35:30.479Z (6 months ago)
• Topics: javascript, react, react-native, state-management
• Language: JavaScript
• Size: 2.39 MB
• Stars: 15
• Watchers: 4
• 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

[![NPM](https://nodei.co/npm/react-beep.png)](https://nodei.co/npm/react-beep/)

[![dependencies](https://david-dm.org/uxitten/react-beep.svg)](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)

```