React-simple-input NPM

react-simple-input

A simple text input for React

⚠️ Warning: This package was built at a time where React was not as popular as it is today. I am deprecating as most of what this package offer is easily re-doable in a serious codebase.

Description

react-simple-input is a small text input component with some utilities, like a timeOut before onChange is triggered, a clear button... If there is any feature you want, please open an issue.

Examples

Import it in your project:

import SimpleInput from 'react-simple-input'; // ES6
var SimpleInput = require('react-simple-input'); // ES5

Classic input with a placeholder

<SimpleInput placeholder='search' />

Classic input with a default value and a clear button

<SimpleInput defaultValue='a default value' clearButton />

Input with an onChange function, executing it 250ms after input change

<SimpleInput changeTimeout={250} onChange={ (value) => { console.log(value) } } />

For other props, see options.

Options

Property	Description	Type	Default value
className	the classes you want to pass to the component intput	`String`	`""`
classNameContainer	the classes you want to pass to the component container	`String`	`""`
defaultValue	the default value of your input	`String`	`""`
placeholder	the placeholder you want for your input	`String`	`""`
eventsTimeouts	the time you want to wait before an event is thrown to you (usefull to avoid too many calls to onChange ect...)	Object	`{ onChange: 0, onKeyDown: 0, onKeyUp: 0, onKeyPress: 0 }`
clearButton	Add a clear button to clear the input in one click	`Boolean`	`false`
selectOnClick	select the input text when the input is clicked	`Boolean`	`false`
onChange	the function called when the input changes*	`Function`	`(e) => {}`
onKeyDown	the function called when the input receives a keyDown event*	`Function`	`(e) => {}`
onKeyUp	the function called when the input receives a keyUp event*	`Function`	`(e) => {}`
onKeyPress	the function called when the input receives a keyPress event*	`Function`	`(e) => {}`
onClick	the function called when the input is clicked*	`Function`	`(e) => {}`