react-nes

React components for nes

npm install -S react-nes

#API

Please refer to the nes docs if you have questions about what each prop does.

nes API documentation

Components

ClientProvider

Props

client (nesClient) : nes client instance

onError (function) : client.onConnect

onConnect (function) : client.onConnect

onDisconnect (function) client.onDisconnect

onUpdate (function) client.onUpdate

children (element) : accepts a single child

Example

const client = new Nes.Client('http://localhost')
const App = ({ auth }) => {
  return (
    <ClientProvider
      client={client}
      onError={console.error}
      onConnect={() => console.log('Global connected')}
      onDisconnect={() => console.log('disconnected')}
      onUpdate={(message) => console.log('Update', message)}
    >
      <div>
        {/* ... */}
      </div>
    </ClientProvider>
  )
}

Connect

Props

auth (object|string) : client auth

delay (number)

maxDelay (number)

retries (number)

timeout (number)

onConnect (function) : the server response callback

children (function) : child callback with signature function({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect })

Example

const MyComponent = ({ auth }) => {
  return (
    <Connect
      auth={auth}
      onConnect={() => console.log('Local connected')}
    >
      {({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) => {
        console.log(connecting, connected, error, overrideReconnectionAuth, connect, disconnect)
      }}
    </Connect>
  )
}

withNesClient (HoC)

inject the client into a component's props

Example

const ComponentWithClient = withNesClient(({ client }) => {
  return (
    <SomeComponentThatNeedsClient client={client}/>
  )
})

Request

Props

lazy (object|string) : client auth

path (string)

method (string)

headers (object)

payload (object)

onResponse (function) : the callback method using the signature function(err, payload, statusCode, headers)

children (function) : child callback with signature function({ fetching, payload, error, statusCode, headers, request })

Example

const Room = ({ id }) => {
  return (
    <Request path={`/room/${id}`}>
      {({ fetching, payload, error, statusCode }) => {
        return (
          <div>
            {statusCode !== 200 && <Redirect path={`/${statusCode}`}/>}
            {fetching && <Loader/>}
            {payload && <Content id={id} data={payload}/>}
            {error && <Error error={error}/>}
          </div>
        )
      }}
    </Request>
  )
}

Subscribe

Props

path (string)

handler (function)

onSubscribe (function) : the callback function called when the subscription request was received by the server or failed to transmit

onUnsubscribe (function) : the callback function called when the unsubscribe request was received by the server or failed to transmit

children (function) : child callback with signature function({ subscribing, subscribed, error, getSubscriptions, subscribe, unsubscribe })

Example

const MySubscribedComponent = ({ connected, id }) => {
  if (!connected) return (<Loader/>)

  return (
    <Subscribe path={`/room/${this.props.id}`} handler={this.handleSub}>
      {({ subscribing, subscribed, error }) => {
        return (
          <div>
            {subscribing && <Loader/>}
            {subscribed && <Content id={id}/>}
            {error && <Error error={error}/>}
          </div>
        )
      }}
    </Subscribe>
  )
}

Realistic Example

// Using react-router and redux...
class RoomWrapper extends Component {
  render () {
    return (
      <Connect
        auth={auth}
        onConnect={() => console.log('Local connected')}
      >
        {({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) => {
          return (
            <Room
              connected={connected}
              id={this.props.params.id}
              room={this.props.room}
              handleRoomSubUpdate={this.handleRoomSubUpdate}
              handleRoomResponse={this.handleRoomResponse}
            />
          )
        }}
      </Connect>
    )
  }

  handleRoomSubUpdate = (message, flags) => {
    this.props.dispatch({ type: 'room/SUB_UPDATE', payload: { message, flags } })
  }

  handleRoomResponse = (error, payload, statusCode, headers) => {
    this.props.dispatch({ type: 'room/RESPONSE', payload, error, meta: { statusCode, headers } })
  }
}

const Room = ({ connected, handleRoomSubUpdate, handleRoomResponse, id, room = {} }) => {
  if (!connected) return (<Loader/>)

  return (
    <Subscribe path={`/room/${id}`} handler={handleRoomSubUpdate}>
      {({ subscribing, subscribed, subError }) => {
        return <Request path={`/room/${id}`} onResponse={handleRoomResponse}>
          {({ fetching, statusCode, reqError }) => {
            if (subscribing || fetching) return (<Loader/>)

            if (subError || reqError) return (<Error error={subError || reqError}/>)

            if (statusCode && statusCode !== 200) return (<Redirect to={`/${statusCode}`}/>)

            return (<RoomContent id={id} room={room} subscribed={subscribed}/>)
          }}
        </Request>
      }}
    </Subscribe>
  )
}

const client = new Nes.Client('http://api.mystartup.com')
const App = ({ auth, dispatch }) => {
  return (
    <ClientProvider
      client={client}
      onError={
        (err) => dispatch({ type: 'nes/Error', payload: err })
      }
      onConnect={
        () => dispatch({ type: 'nes/Connected' })
      }
      onDisconnect={
        (willReconnect, log) => dispatch({ type: 'nes/Disconnect', payload: { willReconnect, log } })
      }
      onUpdate={
        (message) => dispatch({ type: 'nes/Message', payload: message })
      }
    >
      <RoomWrapper auth={auth}/>
    </ClientProvider>
  )
}