search-bar-react

Instagram-inspired react search bar.

Examples

Default:

Mobile:

Install

npm install search-bar-react --save

Usage

import SearchBar from 'search-bar-react'

...
<SearchBar
	onChange={(text) => console.log(text)}
	onFocus={() => console.log('focused')}
	size='large'
	width='100%'
	autoFocus
	placeholder='Search...'
	onClear={() => console.log('closed')}
	value='Initial Value'
/>
...
<SearchBar
	mobile
	onClear={() => console.log('cleared')}
/>
...

Props

| Prop | Type | Default | Description | |-|-|-|-| | mobile | Boolean | false | Use the mobile style version. | | value | string | '' | Initial Value. | | placeholder | string | 'Search' | Search Bar custom placeholder. | | clearBtnText | string | 'Clear' | (mobile version only) custom clear text. | | width | string | '280px' | Set custom width. | | size | string | 'default' | Select a predefined size ['small','large'] | | loading | Boolean | | Control loading button behavior. As default the loading button spins for a second after user input. | | autoFocus | Boolean | false | Autofocus on mount. | | onChange | function | | Callback on input change. Returns string. | | onFocus | function | | Callback on input focus. | | onClear | function | | Callback on Clear-Button click. |

License

MIT Licensed. Copyright (c) Darwin Bonfante 2019.