@space-kit/redis-realtime-react NPM

redis-realtime-react

Redis realtime react client

Installation

npm install @space-kit/redis-realtime-react

Usage

Provider

Add the RealtimeProvider to the top level with db name and base url.

import React from 'react'
import { RealtimeProvider } from '@space-kit/redis-realtime-react'
import App from './app'

function Root() {
  return (
    <Container>
      <RealtimeProvider baseUrl="localhost:5000" db="todos" secure={false}>
        <App />
      </RealtimeProvider>
    </Container>
  )
}

Props	Description	Default
`baseUrl`	Base url of the domain where backend is hosted (without protocols)	nil
`db`	Database name that is to be connected	nil
`secure`	Whether the web socket connection is secure	true

Hooks

useRealtime

import React from 'react'
import { useRealtime } from '@space-kit/redis-realtime-react'

function App() {
  const { publisher, subscribe } = useRealtime()
  const { setDb } = publisher('text')
  const textValue = subscribe('text')

  const onChange = (e) => {
    setDb(e.target.value)
  }

  return (
    <input value={textValue} placeholder="Type something here" onChange={onChange} />
  )
}