https://github.com/darmody/rxact-react
React observer for Rxact
https://github.com/darmody/rxact-react
react rxact
Last synced: about 1 month ago
JSON representation
React observer for Rxact
- Host: GitHub
- URL: https://github.com/darmody/rxact-react
- Owner: Darmody
- License: mit
- Created: 2017-10-12T09:35:07.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-11-06T13:01:03.000Z (over 8 years ago)
- Last Synced: 2025-03-18T02:48:09.857Z (over 1 year ago)
- Topics: react, rxact
- Language: JavaScript
- Homepage:
- Size: 54.7 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Rxact React
[](https://www.npmjs.com/package/rxact-react)
[](https://circleci.com/gh/Darmody/rxact-react/tree/master)
[](https://coveralls.io/github/Darmody/rxact-react)
Rxact React is a React observer for Rxact.
After setup this plugin, the instance of `StateStream` will have an `observer` function helping you binding stream's state to react component.
## Installation
```
yarn add rxact rxact-react
```
## Usage
There are two ways:
#### 1. Install as a plugin
```javascript
import { setup, StateStream } from 'rxact'
import { plugin as rxactReact } from 'rxact-react'
setup({
Observable: /** Observable lib you like **/,
plugins: [rxactReact()],
})
const stream = new StateStream('stream', { name: 'rxact' })
stream.observer(state => ({
name: state.name,
}))(
class ReactComponent extends React.Component {
...
}
)
```
#### 2. Enhance StateStream
```javascript
import { setup, StateStream } from 'rxact'
import { decorator as rxactReact } from 'rxact-react'
const EnhancedStateStream = decorator()(StateStream)
setup({
Observable: /** Observable lib you like **/,
StateStream: EnhancedStateStream,
})
const stream = new EnhancedStateStream('stream', { name: 'rxact' })
stream.observer(state => ({
name: state.name,
}))(
class ReactComponent extends React.Component {
...
}
)
```
## API
#### plugin()
Return a StateStream plugin.
#### decorator()
Return a function for wrapping StateStream.
#### stateStream.observer()
```javascript
stateStream.observer(
mapStateToProps: ?Function,
mergeProps: ?Function,
): StateStreamPlugin
```
| Parameter | Type | Description | Default |
| ------------- | ---- | ----------- | ------- |
| mapStateToProps | Function | Function for mapping stream state to component state. | None |
| mergeProps | Function | Function for merging result of `mapStateToProps` and parent props. | None |
If you are familiar with `react-redux`, you will find out it is almost as same as `connect`.
## License
[MIT](https://github.com/Darmody/rxact-react/blob/master/LICENSE)