React Utils Input
Lightweight React Input component, serving as a reusable utility wrapper for HTML Input elements.
Provides access to commonly used methods as well as wrapper and element classes for reusability.
Installation
npm i --save react-utils-input
Usage
;; Component { super; thisstate = value: null ; } { // Programmatically focus the input thisinput && thisinput; } { return <Input ref= thisinput = c autoComplete='off' className='input-custom-class' checked=false checkedDefault=false disabled=false id='custom-id' label='Label' labelBefore=false name='custom-name' onBlur= {} onChange= this onFocus= {} onKeyDown= {} onKeyUp= {} placeholder='custom-placeholder' type='password' value=thisstatevalue wrapperClassName='wrapper-custom-class'/>; }
The library can also be loaded via require:
const Input = ;
Options
- autocomplete (string) - sets the autocomplete attr. on the input
- className (string) - extra classes for the input
- checked (boolean, default: false) - checked value for the input (type checkbox/radio)
- checkedDefault (boolean, default: false) - default checked state, for uncontrolled components
- disabled (boolean, default: false) - disabled state for the component; once disabled the onChange callback does not fire anymore; also sets a utils-input-wrapper--disabled class
- id (string) - sets the ID attr. on the input
- label (string) - sets the label text (don't forget the id attribute if you want the label to be clickable)
- labelBefore (boolean, default: false) - whether the label should be displayed before the input
- name (string) - sets the name attr. on the input
- onBlur (function) - on blur callback
- onChange (function) - on change callback
- onFocus (function) - on focus callback
- onKeyDown (function) - on key down callback
- onKeyUp (function) - on key up callback
- placeholder (string) - sets the placeholder attr. on the input
- value (text) - sets the value of the input
- wrapperClassName (string) - extra classes for the wrapper
Extra methods
- focus (function) - focus the input programmatically
Licence
The code is open-source and available under the MIT Licence. More details in the LICENCE.md file.