1.1.0 • Published 5 years ago
search-bar-react v1.1.0
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.