rxact-react

React bindings for Rxact


Keywords
rxact, react, reactjs
License
MIT
Install
npm install rxact-react@1.0.0-beta.1

Documentation

Rxact React

npm version CircleCI master Coveralls github branch

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

  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

  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()

  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