@asoft-ltd/viewmodel-react

Live React

Introduction

Built on top of Live, this extension will get you a react hook that follows Live<T> and updates it's value when the value of Live<T> changes

Setup

npm install @asoft-ltd/live-react

Samples

Step 1: get the useLive hook

import { Live, useLive } from "@asoft-ltd/live-react"

const live = new Live(1)

interface CounterProps {
  onToggle: () => void
}

function Counter(props: CounterProps) {
  const value = useLive(live)
  return (
    <div className="App">Live Value: {value}</div>
  );
}

Note:

Since Live<S> should only be used in presentational layers and it's main purpose is to just change state for ui, useLive doesn't provide the mechanism to update the state.