Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tkh44/react-nes
React components for nes
https://github.com/tkh44/react-nes
declarative hapijs nes react react-components sockets
Last synced: about 1 month ago
JSON representation
React components for nes
- Host: GitHub
- URL: https://github.com/tkh44/react-nes
- Owner: tkh44
- License: mit
- Created: 2017-01-29T07:26:39.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-04-03T01:24:51.000Z (about 7 years ago)
- Last Synced: 2024-05-09T11:20:28.376Z (about 2 months ago)
- Topics: declarative, hapijs, nes, react, react-components, sockets
- Language: JavaScript
- Size: 16.6 KB
- Stars: 32
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Lists
- awesome-react-function-as-child-components - react-nes
README
# react-nes
[](https://badge.fury.io/js/react-nes)
[](https://travis-ci.org/tkh44/react-nes)
[](https://codecov.io/gh/tkh44/react-nes)
React components for [nes](https://github.com/hapijs/nes)
```bash
npm install -S react-nes
```
# API
Please refer to the nes docs if you have questions about what each prop does.
[nes API documentation](https://github.com/hapijs/nes/blob/master/API.md)
## 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
```javascript
const client = new Nes.Client('http://localhost')
const App = ({ auth }) => {
return (
console.log('Global connected')}
onDisconnect={() => console.log('disconnected')}
onUpdate={(message) => console.log('Update', message)}
>
{/* ... */}
)
}
```
### 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
```javascript
const MyComponent = ({ auth }) => {
return (
console.log('Local connected')}
>
{({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) => {
console.log(connecting, connected, error, overrideReconnectionAuth, connect, disconnect)
}}
)
}
```
### withNesClient (HoC)
inject the client into a component's props
##### Example
```javascript
const ComponentWithClient = withNesClient(({ client }) => {
return (
)
})
```
### 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
```javascript
const Room = ({ id }) => {
return (
{({ fetching, payload, error, statusCode }) => {
return (
{statusCode !== 200 && }
{fetching && }
{payload && }
{error && }
)
}}
)
}
```
### 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
```javascript
const MySubscribedComponent = ({ connected, id }) => {
if (!connected) return ()
return (
{({ subscribing, subscribed, error }) => {
return (
{subscribing && }
{subscribed && }
{error && }
)
}}
)
}
```
------------------
## Realistic Example
```javascript
// Using react-router and redux...
class RoomWrapper extends Component {
render () {
return (
console.log('Local connected')}
>
{({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) => {
return (
)
}}
)
}
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 ()
return (
{({ subscribing, subscribed, subError }) => {
return
{({ fetching, statusCode, reqError }) => {
if (subscribing || fetching) return ()
if (subError || reqError) return ()
if (statusCode && statusCode !== 200) return ()
return ()
}}
}}
)
}
const client = new Nes.Client('http://api.mystartup.com')
const App = ({ auth, dispatch }) => {
return (
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 })
}
>
)
}
```