@space-kit/redis-realtime-react

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} />
  )
}

Parameters	Description
publisher	Create a publish for a key in db
subscribe	Create a subscriber for a key in db

Publisher Parameters

Parameters	Description
setDb	Similar to set json in redis it sets the value of publisher key

Subscriber Parameters

Parameters	Description
data	Value of the key in redis db
isLoading	Whether the value is being loaded