- ×
Simplifying the connection between Horizon and React by using higher order components.
Filed under datahorizon-react
React bindings for rethinkdb/horizon.
Installation
npm i -S horizon-react
Usage
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 usingsubscribe
.Example Root component:
import { Connector } from 'horizon-react'; import store from './store'; import TodoList from './components/TodoList'; // If you don't pass a horizon client instance, Connector will // automatically create one for you export default () => ( <Connector store={store}> <TodoList /> </Connector> ); // if you pass a horizon client instance, you have to .connect() before // you pass the instance to Connector export default () => ( <Connector store={store} horizon={horizon}> <TodoList /> </Connector> );
Example Subscribed component:
import { subscribe } from 'horizon-react'; import Todo from './Todo'; // simple subscription to the collection "todos" const mapDataToProps = { todos: (hz) => hz('todos') }; const TodoList = (props) => ( <ul> {props.todos.map( todo => <Todo {...todo} /> )} </ul> ); export default subscribe({ mapDataToProps })(TodoList)
Advanced Subscribed component:
import { subscribe } from 'horizon-react'; import Todo from './Todo'; // simple subscription to the collection "todos" const mapDataToProps = { todos: (hz, props) => hz('todos').limit(props.limit) }; // you can connect to redux state too const mapStateToProps = (state, props) => ({ ui: state.checkedTodos }); // and also map dispatch const mapDispatchToProps = (dispatch) => ({ onClickTodo: (todo) => dispatch({type: 'TOGGLE_TODO', payload: {...todo}}) }); const TodoList = (props) => ( <ul> {props.todos.map( todo => <Todo {...todo} /> )} </ul> ); export default subscribe({ mapDataToProps, mapStateToProps, mapDispatchToProps })(TodoList)
FAQ
Does this work with React Native?
It should! If not, please create a new issue!
Can I access the Horizon instance in the child components?
Yes, you can either directly use
context
to access .horizon or just usesubscribe()(MyComponent)
.subscribe
will pass the Horizon instance from the context down to your component as a prophorizon
.Example:
import { subscribe } from 'horizon-react'; const AddTodoButton = (props) => ( <button onClick={() => { props.horizon('todos').store({ text: 'A new todo item.' }); }}> Add a todo item. </button> ); export default subscribe()(AddTodoButton);
Boilerplate repositories
Contributing
Pull Requests are very welcome!
If you find any issues, please report them via Github Issues!
Contributors
License
(MIT)