input-builderx

Enhanced html input with validation, data input and output processing.

Usage no npm install needed!

<script type="module">
  import inputBuilderx from 'https://cdn.skypack.dev/input-builderx';
</script>

README

InputX

Overview

Enhanced html input with validation, data input and output processing.

Installation

yarn add input-builderx

or

npm install input-builderx --save

Demo

Try the demo here.

Usage

Import the React component

import { InputX } from 'input-builderx';

<InputX
  value={this.state.val}
  onChange={(e: any) => this.setState({ val: e.target.value })}
  validator={e => e.target.value % 2 == 0}
  inputProcessor={e => Math.round(e.target.value / 10) * 10}
  outputProcessor={e => Math.round(e.target.value / 10) * 10}
/>

API

Event Description
validator function. Optional. Checks the validity of the user input. If it returns true then the onChange function is called.
inputProcessor function. Optional. Processor function for the value prop.
outputProcessor function. Optional. Processor function for the user input values that will be passed to onChange after processing.

License

Licensed under the MIT license.