React-RealTime
Set of components which provides easy integration Pusher like notification service into your React application.
Installation
React Realtime requires React 16.8.0 or later.
npm i react-realtime
OR
yarn add react-realtime
Usage
All components and functions are available on the top-level export.
Pusher example:
In that case, we need pusher client library. You can find it here.
Channel event listener example:
const MyComponent = { const name setName = const onMyEventCallback = return <span>`User: `</span>}
Channel event trigger example:
const MyComponent = { const data = const trigger = const handleClick = return <span onClick=handleClick>My Component</span>}
Connection event listener example:
const MyComponent = { const status setStatus = const onStateChange = return <span>`Connection status: `</span>}
Use MyComponent inside appropriate channel
// Use your own APP_KEY and APP_CLUSTER from pusher accountconst pusher = APP_KEY cluster: APP_CLUSTER; const App = { return <RealTimeProvider connector=pusher> <RealTimeChannel name="my-channel"> <MyComponent /> </RealTimeChannel> </RealTimeProvider> }
Trigger an event from debug console inside pusher dashboard and watch how username appears in your app.
License
MIT