JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Horizon React

    Simplifying the connection between Horizon and React by using higher order components.
    Filed under 

    • 🔾17%Overall
    • 112
    • 17.7 days
    • 🕩7
    • 👥4

    npm version GitHub issues

    bitHound Overall Score bitHound Dependencies bitHound Code

    travis-ci codecov.io

    horizon-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 using subscribe.

    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 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';
    
    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)

    Show All