dob-react ·

React bindings for dob.

Design idea from Mobx Implementation

Install

npm i dob-react

Online demo

Here is a basic demo, and here is a demo with fractal.

Simple Usage

import{Provider,Connect}from'dob-react'
@ConnectclassAppextendsReact.Component<any,any>{render(){return(<span>{this.props.store.name}</span>)}}ReactDOM.render(<Providerstore={{name: 'bob'}}><App/></Provider>,document.getElementById('react-dom'))

Connect: All parameters from outer Provider are injected into the wrapped components, and the component rerender when the variables used in the render function are modified(sync usage).

Connect all functions

Connect all

Connect all from Provider's parameters, also is this example above.

Connect extra data

Will also inject all parameters from outer Provider.

@Connect({customStore: {name: 'lucy'}})classAppextendsReact.Component<any,any>{}

Map state to props

Will also inject all parameters from outer Provider.

@Connect(state=>{return{customName: 'custom'+state.store.name}})classAppextendsReact.Component<any,any>{}ReactDOM.render(<Providerstore={{name: 'bob'}}><App/></Provider>,document.getElementById('react-dom'))

Support stateless component

classAppextendsReact.Component<any,any>{render(){return(<span>{this.props.store.name}</span>)}}constConnectApp=Connect()(App)// const ConnectApp = Connect({ ... })(App)// const ConnectApp = Connect( state => { ... })(App)