react-simple-input

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) => {}

* the event returned is a React synthetic event. If you need the native event, use e.nativeEvent