Natural Pleistocene Monsters

    react-nes

    1.0.6 • Public • Published

    react-nes

    npm version Build Status codecov

    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>
      )
    }

    Install

    npm i react-nes

    DownloadsWeekly Downloads

    0

    Version

    1.0.6

    License

    MIT

    Last publish

    Collaborators

    • tkh44