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.
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 = 'http://localhost'const App = { return <ClientProvider client=client onError=consoleerror onConnect= console onDisconnect= console onUpdate= console > <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 = { return <Connect auth=auth onConnect= console > { console } </Connect> }
withNesClient (HoC)
inject the client into a component's props
Example
const ComponentWithClient =
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 = { return <Request path=`/room/`> { return <div> statusCode !== 200 && <Redirect path=`/`/> 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 = { if !connected return <Loader/> return <Subscribe path=`/room/` handler=thishandleSub> { return <div> subscribing && <Loader/> subscribed && <Content id=id/> error && <Error error=error/> </div> } </Subscribe> }
Realistic Example
// Using react-router and redux... { return <Connect auth=auth onConnect= console > { return <Room connected=connected id=thispropsparamsid room=thispropsroom handleRoomSubUpdate=thishandleRoomSubUpdate handleRoomResponse=thishandleRoomResponse /> } </Connect> } { thisprops } { thisprops } const Room = { if !connected return <Loader/> return <Subscribe path=`/room/` handler=handleRoomSubUpdate> { return <Request path=`/room/` onResponse=handleRoomResponse> { if subscribing || fetching return <Loader/> if subError || reqError return <Error error=subError || reqError/> if statusCode && statusCode !== 200 return <Redirect to=`/`/> return <RoomContent id=id room=room subscribed=subscribed/> } </Request> } </Subscribe> } const client = 'http://api.mystartup.com'const App = { return <ClientProvider client=client onError= onConnect= onDisconnect= onUpdate= > <RoomWrapper auth=auth/> </ClientProvider> }