use-live-state

0.0.2 • Public • Published

use-lives-state

This package provides a lil tiny react hook to facilitate React components that have their state managed by LiveState.

Usage

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

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 0.0.2
    1
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 0.0.2
    1
  • 0.0.1
    0

Package Sidebar

Install

npm i use-live-state

Weekly Downloads

1

Version

0.0.2

License

ISC

Unpacked Size

7.03 kB

Total Files

6

Last publish

Collaborators

  • superchris