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...
npm install --save input-props
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!