{"id":13793370,"url":"https://github.com/tkh44/react-nes","last_synced_at":"2025-06-26T17:32:18.425Z","repository":{"id":57341784,"uuid":"80334135","full_name":"tkh44/react-nes","owner":"tkh44","description":"React components for nes","archived":false,"fork":false,"pushed_at":"2017-04-03T01:24:51.000Z","size":17,"stargazers_count":32,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-10T20:25:16.121Z","etag":null,"topics":["declarative","hapijs","nes","react","react-components","sockets"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tkh44.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-29T07:26:39.000Z","updated_at":"2018-09-04T14:46:36.000Z","dependencies_parsed_at":"2022-09-16T03:01:16.156Z","dependency_job_id":null,"html_url":"https://github.com/tkh44/react-nes","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"purl":"pkg:github/tkh44/react-nes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-nes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-nes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-nes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-nes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tkh44","download_url":"https://codeload.github.com/tkh44/react-nes/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tkh44%2Freact-nes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261181630,"owners_count":23121303,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["declarative","hapijs","nes","react","react-components","sockets"],"created_at":"2024-08-03T23:00:19.806Z","updated_at":"2025-06-26T17:32:18.392Z","avatar_url":"https://github.com/tkh44.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# react-nes\n\n[![npm version](https://badge.fury.io/js/react-nes.svg)](https://badge.fury.io/js/react-nes)\n[![Build Status](https://travis-ci.org/tkh44/react-nes.svg?branch=master)](https://travis-ci.org/tkh44/react-nes)\n[![codecov](https://codecov.io/gh/tkh44/react-nes/branch/master/graph/badge.svg)](https://codecov.io/gh/tkh44/react-nes)\n\n\n\nReact components for [nes](https://github.com/hapijs/nes)\n\n```bash\nnpm install -S react-nes\n```\n\n# API\n\nPlease refer to the nes docs if you have questions about what each prop does.\n\n[nes API documentation](https://github.com/hapijs/nes/blob/master/API.md)\n\n\n## Components\n\n### ClientProvider\n\n##### Props\n\n**client** (_nesClient_) : nes client instance\n\n**onError** (_function_) : `client.onError`\n\n**onConnect** (_function_) : `client.onConnect`\n\n**onDisconnect** (_function_) `client.onDisconnect`\n\n**onUpdate** (_function_) `client.onUpdate`\n\n**children** (_element_) : accepts a single child\n\n\n##### Example\n```javascript\nconst client = new Nes.Client('http://localhost')\nconst App = ({ auth }) =\u003e {\n  return (\n    \u003cClientProvider\n      client={client}\n      onError={console.error}\n      onConnect={() =\u003e console.log('Global connected')}\n      onDisconnect={() =\u003e console.log('disconnected')}\n      onUpdate={(message) =\u003e console.log('Update', message)}\n    \u003e\n      \u003cdiv\u003e\n        {/* ... */}\n      \u003c/div\u003e\n    \u003c/ClientProvider\u003e\n  )\n}\n```\n\n### Connect\n\n##### Props\n\n**auth** (_object|string_) : client auth\n\n**delay** (_number_)\n\n**maxDelay** (_number_)\n\n**retries** (_number_)\n\n**timeout** (_number_)\n\n**onConnect** (_function_) :  the server response callback\n\n**children** (_function_) :  child callback with signature `function({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect })` \n\n##### Example\n```javascript\nconst MyComponent = ({ auth }) =\u003e {\n  return (\n    \u003cConnect\n      auth={auth}\n      onConnect={() =\u003e console.log('Local connected')}\n    \u003e\n      {({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) =\u003e {\n        console.log(connecting, connected, error, overrideReconnectionAuth, connect, disconnect)\n      }}\n    \u003c/Connect\u003e\n  )\n}\n```\n\n### withNesClient (HoC)\n\ninject the client into a component's props\n\n##### Example\n```javascript\nconst ComponentWithClient = withNesClient(({ client }) =\u003e {\n  return (\n    \u003cSomeComponentThatNeedsClient client={client}/\u003e\n  )\n})\n```\n\n### Request\n\n##### Props\n\n**lazy** (_object|string_) : client auth\n\n**path** (_string_)\n\n**method** (_string_)\n\n**headers** (_object_)\n\n**payload** (_object_)\n\n**onResponse** (_function_) :  the callback method using the signature `function(err, payload, statusCode, headers)`\n\n**children** (_function_) :  child callback with signature `function({ fetching, payload, error, statusCode, headers, request })`\n\n##### Example\n```javascript\nconst Room = ({ id }) =\u003e {\n  return (\n    \u003cRequest path={`/room/${id}`}\u003e\n      {({ fetching, payload, error, statusCode }) =\u003e {\n        return (\n          \u003cdiv\u003e\n            {statusCode !== 200 \u0026\u0026 \u003cRedirect path={`/${statusCode}`}/\u003e}\n            {fetching \u0026\u0026 \u003cLoader/\u003e}\n            {payload \u0026\u0026 \u003cContent id={id} data={payload}/\u003e}\n            {error \u0026\u0026 \u003cError error={error}/\u003e}\n          \u003c/div\u003e\n        )\n      }}\n    \u003c/Request\u003e\n  )\n}\n```\n\n### Subscribe\n\n##### Props\n\n**path** (_string_)\n\n**handler** (_function_)\n\n**onSubscribe** (_function_) :  the callback function called when the subscription request was received by the server or failed to transmit\n\n**onUnsubscribe** (_function_) :  the callback function called when the unsubscribe request was received by the server or failed to transmit\n\n**children** (_function_) :  child callback with signature `function({ subscribing, subscribed, error, getSubscriptions, subscribe, unsubscribe })`\n\n##### Example\n```javascript\nconst MySubscribedComponent = ({ connected, id }) =\u003e {\n  if (!connected) return (\u003cLoader/\u003e)\n\n  return (\n    \u003cSubscribe path={`/room/${this.props.id}`} handler={this.handleSub}\u003e\n      {({ subscribing, subscribed, error }) =\u003e {\n        return (\n          \u003cdiv\u003e\n            {subscribing \u0026\u0026 \u003cLoader/\u003e}\n            {subscribed \u0026\u0026 \u003cContent id={id}/\u003e}\n            {error \u0026\u0026 \u003cError error={error}/\u003e}\n          \u003c/div\u003e\n        )\n      }}\n    \u003c/Subscribe\u003e\n  )\n}\n```\n\n------------------\n\n\n## Realistic Example\n```javascript\n// Using react-router and redux...\nclass RoomWrapper extends Component {\n  render () {\n    return (\n      \u003cConnect\n        auth={auth}\n        onConnect={() =\u003e console.log('Local connected')}\n      \u003e\n        {({ connecting, connected, error, overrideReconnectionAuth, connect, disconnect }) =\u003e {\n          return (\n            \u003cRoom\n              connected={connected}\n              id={this.props.params.id}\n              room={this.props.room}\n              handleRoomSubUpdate={this.handleRoomSubUpdate}\n              handleRoomResponse={this.handleRoomResponse}\n            /\u003e\n          )\n        }}\n      \u003c/Connect\u003e\n    )\n  }\n\n  handleRoomSubUpdate = (message, flags) =\u003e {\n    this.props.dispatch({ type: 'room/SUB_UPDATE', payload: { message, flags } })\n  }\n\n  handleRoomResponse = (error, payload, statusCode, headers) =\u003e {\n    this.props.dispatch({ type: 'room/RESPONSE', payload, error, meta: { statusCode, headers } })\n  }\n}\n\nconst Room = ({ connected, handleRoomSubUpdate, handleRoomResponse, id, room = {} }) =\u003e {\n  if (!connected) return (\u003cLoader/\u003e)\n\n  return (\n    \u003cSubscribe path={`/room/${id}`} handler={handleRoomSubUpdate}\u003e\n      {({ subscribing, subscribed, subError }) =\u003e {\n        return \u003cRequest path={`/room/${id}`} onResponse={handleRoomResponse}\u003e\n          {({ fetching, statusCode, reqError }) =\u003e {\n            if (subscribing || fetching) return (\u003cLoader/\u003e)\n\n            if (subError || reqError) return (\u003cError error={subError || reqError}/\u003e)\n\n            if (statusCode \u0026\u0026 statusCode !== 200) return (\u003cRedirect to={`/${statusCode}`}/\u003e)\n\n            return (\u003cRoomContent id={id} room={room} subscribed={subscribed}/\u003e)\n          }}\n        \u003c/Request\u003e\n      }}\n    \u003c/Subscribe\u003e\n  )\n}\n\nconst client = new Nes.Client('http://api.mystartup.com')\nconst App = ({ auth, dispatch }) =\u003e {\n  return (\n    \u003cClientProvider\n      client={client}\n      onError={\n        (err) =\u003e dispatch({ type: 'nes/Error', payload: err })\n      }\n      onConnect={\n        () =\u003e dispatch({ type: 'nes/Connected' })\n      }\n      onDisconnect={\n        (willReconnect, log) =\u003e dispatch({ type: 'nes/Disconnect', payload: { willReconnect, log } })\n      }\n      onUpdate={\n        (message) =\u003e dispatch({ type: 'nes/Message', payload: message })\n      }\n    \u003e\n      \u003cRoomWrapper auth={auth}/\u003e\n    \u003c/ClientProvider\u003e\n  )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkh44%2Freact-nes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftkh44%2Freact-nes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftkh44%2Freact-nes/lists"}