Miss any of our Open RFC calls?Watch the recordings here! »


0.4.2 • Public • Published


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.


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.


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.


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


npm i react-simple-input

DownloadsWeekly Downloads






Unpacked Size

16.2 kB

Total Files


Last publish


  • avatar