react-deepstream-rp-hoc v0.2.8

react-deepstream-rp-hoc

A deepstream React wrapper that exports Classes supporting Render Props and HOCs.

Usage

HOCs are actually implemented with Render Props so it is possible to use either depeneding on your preference.

Using HOCs

Application Component which logs into deepstream.

import {withDeepstream} from 'react-deepstream-rp-hoc';
class AppBase extends React.Component {
  render () {
    if (this.props.connected) {
      return <List key={listName} listName={listName} />
    } else {
      return <div>Loading</div>
    }
  }
}
let App = withDeepstream(AppBase)

Returns Base App Class wrapped with deepstream client. this.props.connected indicates client connection status. E.g.

  <App appUrl={<YOUR APP URL} authParams={AUTH PARAMS} >

List Component loads Deepstream List of given 'ListName'.

import {withDeepstreamList} from 'react-deepstream-rp-hoc';
class ListBase extends React.Component {
  render() {
    const entries = this.props.entries;
    const records = entries.map( (record) => 
      <Record key={record} recordName={record} />
    );
    return <ul>{records}</ul>  
  }
}
let List = withDeepstreamList(ListBase);

Returns Base List Class wrapped with deepstream list. E.g.

  <List listName={listName}>

Record Component loads Deepstream JSON document of given 'recordName'.

import {withDeepstreamAnonRecord} from 'react-deepstream-rp-hoc';
class RecordBase extends React.Component {
  render() {
    return <li>{JSON.stringify(this.props.data)}</li>
  }  
}
let Record =  withDeepstreamAnonRecord(RecordBase);

Returns Base Document Class wrapped with deepstream anonymous record. E.g.

  <Record recordName={recordName}>

Render Props

The same as above but using render props.

import {
  Deepstream, 
  DeepstreamList, 
  DeepstreamAnonRecord
 } from 'react-deepstream-rp-hoc';
import React from 'react';

let config = {
  "appUrl": "<YOUR DEEPSTREAM APP URL>", 
  "authParams": {},
  "listName": "<YOUR LIST NAME>"
}

class Record extends React.Component {
  render() {
    return <DeepstreamAnonRecord recordName = {this.props.recordName}
      render = { (record) =>
        <li>{JSON.stringify(record.data)}</li>
      }
    />
  }  
}

class List extends React.Component {
  render() {
    return <DeepstreamList listName = {this.props.listName}
      render = { (list) => <ul> {
          list.entries.map( (record) => <Record key={record} recordName={record} />
        )}</ul>
      }
    />
  }
}

class App extends React.Component {
  render () {
    return <Deepstream appUrl = {config.appUrl} authParams = {config.authParams}
      render = { (ds) =>  
        ds.connected
          ?<List listName = {config.listName} />
          :<div> Loading ... </div>
      }
    />
  }
}

export default App;