https://github.com/zxbodya/rx-react-container
Use RxJS in React components, via HOC or Hook
https://github.com/zxbodya/rx-react-container
hoc hooks observable react rx rxjs
Last synced: 5 months ago
JSON representation
Use RxJS in React components, via HOC or Hook
- Host: GitHub
- URL: https://github.com/zxbodya/rx-react-container
- Owner: zxbodya
- Created: 2015-12-05T03:13:34.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T21:49:42.000Z (almost 3 years ago)
- Last Synced: 2025-04-17T06:44:23.102Z (6 months ago)
- Topics: hoc, hooks, observable, react, rx, rxjs
- Language: TypeScript
- Homepage:
- Size: 2.22 MB
- Stars: 108
- Watchers: 7
- Forks: 11
- Open Issues: 18
-
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md
Awesome Lists containing this project
README
## Rx React Container
[](https://travis-ci.org/zxbodya/rx-react-container)
[](https://codecov.io/github/zxbodya/rx-react-container?branch=master)
Helper utilities allowing to transparently connect RxJS logic to React Component.
Works by wrapping React Component into container that:
- provides access to props passed to it as observables (both individual, and combinations - see details below)
- renders wrapped component with data form observable created in controller
- provides utility to combine observables, observers and static props into one observable of props to be rendered
If you are interested in history behind this - look at [gist about it](https://gist.github.com/zxbodya/20c63681d45a049df3fc).
First project where it was used: [reactive-widgets](https://github.com/zxbodya/reactive-widgets)
### Installation
`npm install rx-react-container --save`
### Usage
Currently there are two ways of using it:
- with high order components
- with hooks
High order components:
```ts
const ContainerComponent = connect(
controller: (propsHelper) => Observable
)(WrappedComponent)
```
Hooks:
*Warning: hooks version is very new, consider it experimental*
```ts
const resultProps = useRxController(
controller: (propsHelper) => Observable,
props
);
```
In theory, both are equivalent, while hooks one is more compact/flexible.
In both cases `controller` is function creating observable of properties to be rendered.
`propsHelper` argument of it provides few helper methods to access props as observables:
- `getProp(name)` - returning observable of distinct values of specified property
- `getProps(...names)` - returning observable of distinct arrays of values for specified properties
also there are fields with current properties(in some cases this is useful, but generally - better to use helper methods above):
- `props$` - observable with current properties
- `props` - getter to get current properties of wrapper component, or what was passed to hook when rendering
To help combining various things into result observable, library also provides helper function to combine data into single observable:
`combineProps(observables, observers, otherProps)`
Where:
- `observables` object with observables with data for component
- `observers` object with observers to be passed as callbacks to component
- `props` object with props to pass directly to component
### Example:
```JS
import React from 'react';
import { render } from 'react-dom';
import { Subject, merge } from 'rxjs';
import { connect, combineProps, useRxController } from 'rx-react-container';
import { map, scan, switchMap, startWith } from 'rxjs/operators';
function App({ onMinus, onPlus, totalCount, step }) {
return (
-{step}[{totalCount}]
+{step}
);
}
function appController(container) {
const onMinus$ = new Subject();
const onPlus$ = new Subject();
const click$ = merge(
onMinus$.pipe(map(() => -1)),
onPlus$.pipe(map(() => +1))
);
const step$ = container.getProp('step');
const totalCount$ = step$.pipe(
switchMap(step => click$.pipe(map(v => v * step))),
startWith(0),
scan((acc, x) => acc + x, 0)
);
return combineProps(
{ totalCount: totalCount$, step: step$ },
{ onMinus: onMinus$, onPlus: onPlus$ }
);
}
const AppContainer = connect(appController)(App);
// same thing with hooks
function HookApp(props) {
const state = useRxController(appController, props);
if(!state) return null;
const { onMinus, onPlus, totalCount, step } = state;
return (
-{step}[{totalCount}]
+{step}
);
}
const appElement = document.getElementById('app');
render(, appElement);
```