input-props

A React component that provides a two-way data-binding feel to your forms controlled by a MobX state.

Please check out the storybook!

What? You don't use MobX? It is the best state management library for React hands down. Please take a look at this example I wrote with MobX (hooks version) and Typescript, and imagine a entire codebase being written with that kind of simplicity and equal or better performance than any other state management library. It's just great. Anyway, coming back to InputProps...

Installation

npm install --save input-props

How to use

Assuming you are using an observable object/store that holds your state:

<InputProps stateObject={store} propertyName='fieldName'>
    <input/>
</InputProps>

The code above will inject the onChange and value properties into the input element, so it updates the state automatically.

If you need to validate the changed data:

<InputProps stateObject={store} propertyName='fieldName' onValueChange={(newValue) => validationFunctionThatReturnsBoolean(newValue)}>
    <input/>
</InputProps>

If you need to know when the data changed after the state was updated:

<InputProps stateObject={store} propertyName='fieldName' onValueChanged={(oldValue, newValue) => doSomethingKnowingThatTheChangeCameThrough(newValue)}>
    <input/>
</InputProps>

There are lots of entry points for interceptors for differents types of data, you can see all the options in the JSDoc documentation of the components. Have fun!