An easy easy way to wrap controlled components that provide value and onChange props with state.

Makes your components behave like React input components.

yarn add react-value

You can either use the Value component, which takes a render prop:

import { Value } from 'react-value';

<Value
  defaultValue={defaultValue} // optional
  onChange={newValue => null} // optional
  render={(value, onChange) => <MyInput onChange={onChange} value={value} />}
/>;

..or for repeated use, you can use the withValue HOC:

import { withValue } from 'react-value';

const MyInputWithValue = withValue(MyInput);

<MyInputWithValue defaultValue="Hello World" />;

If you want to use the HOC but the component you're wrapping uses different props for value and onChange, you can map them using the second options argument. For example, if the component expects onValueUpdated and currentValue props:

import { withValue } from 'react-value';

const MyInputWithValue = withValue(MyInput, {
  onChangeProp: 'onValueUpdated',
  valueProp: 'currentValue',
});

<MyInputWithValue defaultValue="Hello World" />;

Copyright (c) 2018 Jed Watson. MIT Licensed.