npm.io
1.0.11 • Published 8 years ago

asitis-searchbar

Licence
MIT
Version
1.0.11
Deps
5
Vulns
0
Weekly
0
SummaryDependencyVersions

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

Keywords

Asitisreactsearchcomponent