react-component-auto-controller

An easy way to create controlled-component & uncontrolled-component

Demo

https://codesandbox.io/s/hungry-resonance-jiee2?fontsize=14

Usage

// sourse component
const Foo = ({ count, onCountChange }) =>
  console.log(count, onCountChange) || (
    <div onClick={() => onCountChange(count + 1)}> {count}</div>
  );

// with auto-controller HOC
import AutoController from "react-component-auto-controller";
const NewFoo = AutoController({
  value: "count",
  onChange: "onCountChange",
  defaultValue: "defaultCount"
})(Foo);

// as controlled:
function Usage1() {
  const [count, setCount] = React.useState(0);
  return <NewFoo count={count} onCountChange={v => setCount(v)} />;
}

// as uncontrolled:
const Usage2 = () => {
  return <NewFoo defaultCount={0} />;
};