Search-bar-react NPM

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.

react search bar instagram mobile

@emotion/core @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome react

@everything-registry/sub-chunk-2724 @infinitebrahmanuniverse/nolb-sear

1.1.0

7 years ago

1.0.0

7 years ago