use-controllable-state

A React custom hook for managing state in a controlled component.

Install

npm install --save use-controllable-state

Usage

import { FC } from 'react'
import { useControllableState } from 'use-controllable-state';

const Component: FC = (value: string, onChange) => {
  const [internalChanges, internalSetState] = useControllableState<string>(value, onChange);

  const handleClick = () => {
    internalSetState("example of internal change to controlled state");
  };

  return (
    <div>
      <button onClick={handleClick}>Change state internally</button>
      <div>Last internal state change: {internalChanges}</div>
      <div>Controlled state: {value}</div>
    </div>
  );
};

License

MIT © RichieMillennium