react-simple-input

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

GitHub