react-realtime
v1.2.0
Published
Set of components which provides easy integration Pusher like notification service into your React application.
Downloads
12
Maintainers
Readme
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.
import {
RealTimeProvider,
RealTimeChannel,
useRealTimeEventListener,
useRealTimeEventTrigger,
useRealTimeConnectionEventListener,
} from 'react-realtime'
Pusher example:
In that case, we need pusher client library. You can find it here.
Channel event listener example:
import React, { useState, useCallback } from 'react'
import { useRealTimeEventListener } from 'react-realtime'
const MyComponent = () => {
const [name, setName] = useState('')
const onMyEventCallback = useCallback(data => {
// do something with real-time data
// for example set username
const { name } = data
setName(name)
}, [])
useRealTimeEventListener('user-updated-event', onMyEventCallback)
return <span>{`User: ${name}`}</span>
}
Channel event trigger example:
import React, { useMemo, useCallback } from 'react'
import { useRealTimeEventTrigger } from 'react-realtime'
const MyComponent = () => {
const data = useMemo(() => {
// for example return empty object
return {}
}, [])
const trigger = useRealTimeEventTrigger()
const handleClick = useCallback(() => {
trigger('client-my-event', data)
}, [])
return <span onClick={handleClick}>My Component</span>
}
Connection event listener example:
import React, { useState, useCallback } from 'react'
import { useRealTimeConnectionEventListener } from 'react-realtime'
const MyComponent = () => {
const [status, setStatus] = useState('connected')
const onStateChange = useCallback(status => {
setStatus(status)
}, [])
useRealTimeConnectionEventListener('state_change', onStateChange)
return <span>{`Connection status: ${status}`}</span>
}
Use MyComponent inside appropriate channel
import React from 'react'
import Pusher from 'pusher-js'
import { RealTimeProvider, RealTimeChannel } from 'react-realtime'
// Use your own APP_KEY and APP_CLUSTER from pusher account
const pusher = new 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