React bindings for rethinkdb/horizon.
npm i -S horizon-react
Currently, horizon-react exports two enhancers.
Similarly to react-redux, you'll have to first wrap a root component with a
Connector which will initialize the horizon instance and then subscribe to
data by using subscribe.
Example Root component:
import{Connector}from'horizon-react';importstorefrom'./store';importTodoListfrom'./components/TodoList';// If you don't pass a horizon client instance, Connector will// automatically create one for youexportdefault()=>(<Connectorstore={store}><TodoList/></Connector>);// if you pass a horizon client instance, you have to .connect() before// you pass the instance to Connectorexportdefault()=>(<Connectorstore={store}horizon={horizon}><TodoList/></Connector>);Example Subscribed component:
import{subscribe}from'horizon-react';importTodofrom'./Todo';// simple subscription to the collection "todos"constmapDataToProps={todos: (hz)=>hz('todos')};constTodoList=(props)=>(<ul>{props.todos.map(todo=><Todo{...todo}/>)}</ul>);exportdefaultsubscribe({
mapDataToProps
})(TodoList)Advanced Subscribed component:
import{subscribe}from'horizon-react';importTodofrom'./Todo';// simple subscription to the collection "todos"constmapDataToProps={todos: (hz,props)=>hz('todos').limit(props.limit)};// you can connect to redux state tooconstmapStateToProps=(state,props)=>({ui: state.checkedTodos});// and also map dispatchconstmapDispatchToProps=(dispatch)=>({onClickTodo: (todo)=>dispatch({type: 'TOGGLE_TODO',payload: {...todo}})});constTodoList=(props)=>(<ul>{props.todos.map(todo=><Todo{...todo}/>)}</ul>);exportdefaultsubscribe({
mapDataToProps,
mapStateToProps,
mapDispatchToProps
})(TodoList)It should! If not, please create a new issue!
Yes, you can either directly use context to access .horizon or just use subscribe()(MyComponent). subscribe will pass the Horizon instance from the context down to your component as a prop horizon.
Example:
import{subscribe}from'horizon-react';constAddTodoButton=(props)=>(<buttononClick={()=>{props.horizon('todos').store({text: 'A new todo item.'});}}>
Add a todo item.
</button>);exportdefaultsubscribe()(AddTodoButton);Pull Requests are very welcome!
If you find any issues, please report them via Github Issues!
(MIT)