asitis-searchbar

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-searchbar
 

---

Usage

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
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