@lollipop-onl/react-reactive-state v1.1.2

react-reactive-state

This library is provided a Vue like useState hook api for React.

Installation

$ yarn add @lollipop-onl/react-reactive-state
# or
$ npm install -S @lollipop-onl/react-reactive-state

Usage

import React from 'react';
import { useReactiveState, ReactiveState } from '@lollipop-onl/react-reactive-state';

type Props = {
  model: ReactiveState<string>;
}

const MyInput: React.VFC<Props> = ({ model }) => {
  const onInput = (event: React.InputEvent<HTMLInputElement>): void => {
    model.value = event.target.value;
  };

  return (
    <input
      type="text"
      defaultValue={model.value}
      onInput={onInput}
    />
  );
};

const App: React.VFC = () => {
  const myVal = useReactiveState('');

  const resetValue = () => myVal.reset(); // myVal change to ''
  
  return (
    <>
      <MyInput model={myVal} />
      <p>{ myVal.value }</p>
      <button onClick={resetValue}>Reset value</button>
    </>
  )
};