Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/christianalfoni/rxjs-react-component
A component allowing you to change state using observables
https://github.com/christianalfoni/rxjs-react-component
Last synced: about 1 month ago
JSON representation
A component allowing you to change state using observables
- Host: GitHub
- URL: https://github.com/christianalfoni/rxjs-react-component
- Owner: christianalfoni
- License: mit
- Created: 2016-04-01T08:19:46.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-01T12:22:48.000Z (almost 7 years ago)
- Last Synced: 2024-11-03T01:03:23.514Z (about 1 month ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 120
- Watchers: 6
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# rxjs-react-component
A component allowing you to change state using observables
### Install
`npm install rxjs-react-component`
Depends on React and rxjs
### Howto
By convention all methods defined with a `$` at the end will expose an observable instead. If you return the observable it is expected to map to an object. This object will be run with `this.setState(mappedObservableObject)` and cause a render on the component.
```js
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
class MyComponent extends ObservableComponent {
constructor(props) {
super(props);
this.state = {count: 0};
}
onClick$(observable) {
return observable.map(() => ({count: this.state.count + 1}));
}
render() {
return (
Hello world ({this.state.count})
Increase
);
}
}
```
You can create complex state changes by merging multiple observables.
```js
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
import {Observable} from 'rxjs';
class MyComponent extends ObservableComponent {
constructor(props) {
super(props);
this.state = {count: 0};
}
onClick$(observable) {
const increase$ = observable.map(() => ({count: this.state.count + 1}));
const delayedIncrease$ = observable.delay(200).map(() => ({count: this.state.count + 1}));
return Observable.merge(
increase$,
delayedIncrease$
);
}
render() {
return (
Hello world ({this.state.count})
Increase
);
}
}
```
You can also hook on to life-cycle hooks using the same naming convention. Not all of these should cause a new render of the component and you handle that by just not returning the observable.
```js
import React from 'react';
import ObservableComponent from 'rxjs-react-component';
class MyComponent extends ObservableComponent {
componentWillUpdate$(observable) {
observable.forEach({nextProps} => console.log(nextProps));
}
render() {
return (
Hello world
);
}
}
```