React Horizon

React Horizon makes it easier to use your React application with horizon.io realtime backend

Installation

$ npm i react-hz

React Horizon allows reactive dataflow between backend and React.js application. Client demand is declared in React components using Horizon's query API and data is synchronized thanks to horizon.io realtime backend.

Running example

• Make sure you have installed RethinkDB and Horizon's CLI
• Start server from

  example

  directory:

  $ hz serve --dev

• Open http://127.0.0.1:8181 in your browser

Usage

Read Horizon's Collection API for querying methods.

react-hz

HorizonProvider

HorizonRoute

Horizon

HorizonProvider

Horizon

instance

js

  

Horizon([config])

Horizon

react-hz

js
const horizonInstance = Horizon({ host: 'localhost:8181' });

HorizonRoute

renderSuccess

renderFailure

js
 
Connecting...
}
  renderDisconnected={() => 
You are offline
}
  renderConnected={() => 
You are online
}
  renderSuccess={() => 
Hello!
}
  renderFailure={(error) => 
Something went wrong...
} />

connect(component, config)

connect

js
const AppContainer = connect(App, {
  subscriptions: {
    // ...
  },
  mutations: {
    // ...
  }
});

withQueries(config)

withQueries

connect

connect

import {withQueries} from 'react-hz'

@withQueries({ subscriptions: { // ... }, mutations: { // ... } }) class MyComponent extends Component { // ... } ```

Subscriptions

subscriptions

hz

Behind the scenes React Horizon calls

watch

subscribe

All subscriptions are unsubscribed automatically on

componentWillUnmount

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Horizon, HorizonProvider, connect } from 'react-hz';

class App extends Component {
  render() {
const itemsSubcription = this.props.items;

return (
  </pre><ul>{itemsSubcription.map(({ id, title }) =&gt; <li key="{id}">{title}</li>)}</ul>
);
  }
}
const AppContainer = connect(App, {
  subscriptions: {
    items: (hz, { username }) => hz('items')
      .find({ username })
      .below({ id: 10 })
      .order('title', 'ascending')
  }
});
render((
  
    
  
), document.getElementById('app'));
Mutations

mutations
 is a map of mutation query names to mutation query functions. Specified mutations are available as props in React component behind their corresponding names in config.

Available mutation operations:
- 
remove
 - http://horizon.io/api/collection/#remove
- 
removeAll
 - http://horizon.io/api/collection/#removeall
- 
replace
 - http://horizon.io/api/collection/#replace
- 
store
 - http://horizon.io/api/collection/#store
- 
upsert
 - http://horizon.io/api/collection/#upsert

It's possible to create two types of mutations (see example below):
- generic mutation which provides mutation object and thus gives you an ability to call different mutation operations in component
- specific mutation which is a function that receives parameters required for mutation, instantiates mutations object and applies mutation immediately
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Horizon, HorizonProvider, connect } from 'react-hz';

class App extends Component {
  render() {
const itemsMutation = this.props.items;
const removeItem = this.props.removeItem;

return (
  <div>
    <button onclick="{()"> itemsMutation.store({ title: 'Item' })}&gt;add</button>
    <button onclick="{()"> removeItem(24)}&gt;remove</button>
  </div>
);
  }
}
const AppContainer = connectHorizon(App, {
  mutations: {
    items: (hz) => hz('items'),
    removeItem: (hz) => (id) => hz('items').remove(id)
  }
});
render((
  
    
  
), document.getElementById('app'));

Limitations



GraphQL. GraphQL would be a much better declarative replacement instead of current Collection API. Horizon team is working on GraphQL adapter, follow this thread for updates.

Optimistic updates. Optimistic updates feature is being discussed and it seems like it's not obvious at the moment if this should be baked into client library.

Offline. Offline support is not implemented yet.

Managing reconnection. Automatic reconnection is not implemented yet.


MIT