react-nes
React components for nes
npm install -S react-nesAPI
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.onError
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>
)
}