1.0.11 • Published 7 years ago
asitis-searchbar v1.0.11
Asitis React Searchbar
Installation
Execute one of the following commands in powershell
# Yarn users
yarn global add asitis-searchbar
# NPM users
npm install --save asitis-searchbarUsage
To import this component use the following:
import SearchBar from 'asitis-searchbar'Description
Searches in multiple arrays on specific definitions set up in options
Props / parameters
| Prop | Type | Required | Description | Default value | ||
|---|---|---|---|---|---|---|
| id | string | NO | Id of main element in searchbar (useful for autofocus) | searchBar | ||
| delay | number | NO | Delay in milliseconds when to perform search after key event | 500 | ||
| maxresults | number | NO | Max results shown in component | 5 | ||
| searchPageUri | string | NO | Base URI for search page (when user clicks more-link) | /search | ||
| ResultItem | object | node | func | NO | Element for searchresult or object of different elements for each dataset | |
| ResultLastItem | node | func | NO | Element for show more-link | ||
| data | array : object | NO | Array of objects, each with its array | Small array with objects | ||
| loader | node | func | NO | Element for custom loader | ||
| returnFn | func | NO | Callback function when the user clicks a result or more link | |||
| style | object | NO | Style object to customize component | |||
| className | string | NO | Adds class to component.. hio hio |
Example
import React, { Component } from 'react'
import SearchBar from 'asitis-searchbar'
const db = [
{
'type': 'clients',
'resultUri': '/clients',
'identifier': 'Id',
'keys': [ 'text' ],
'data': [
{ 'Id': '556611', 'text': 'Rolles Bygg AB' },
{ 'Id': '123123', 'text': 'Billys Företag AB' }
]
}
]
class Example extends Component {
render() {
const searchBarOptions = {
data: db,
ResultItem: {
'clients': ({item}) => <div><strong>Client</strong> Name: {item.text}</div>
},
returnFn: (url, id, params) => console.log(url, id, params)
}
return <SearchBar id='exampleSearchBar' {...searchBarOptions} />
}
}
export default Example