This package provides a lil tiny react hook to facilitate React components that have their state managed by LiveState.
Add it just like any npm:
npm install use-live-state Make a LiveState instance:
import LiveState from "phx-live-state"; export const liveState = new LiveState('ws://localhost:4002/socket', 'todo:all');Then, in your components:
import React, { Component } from 'react'; import { liveState } from './live_state'; import useLiveState from 'use-live-state'; export const TodoList = () => { const [state, _pushEvent] = useLiveState(liveState, {}); return ( <ul> {(state as any).todos && (state as any).todos.map((todo) => <li>{todo}</li>)} </ul> ); }import React, { Component, useRef } from 'react'; import { liveState } from './live_state_react'; import useLiveState from 'use-live-state'; export const TodoForm = () => { const input = useRef(null); const [_state, pushEvent] = useLiveState(liveState, {}); const onButtonClick = () => { pushEvent('add_todo', {todo: input.current.value}); input.current.value = ''; }; return ( <div> <input name="todo" ref={input} /> <button onClick={onButtonClick}>Add Todo</button> </div> ); }To see an example project of how all this fits together, check out https://github.com/launchscout/live_state/tree/main/testbed