# asitis-searchbar

> Execute one of the following commands in powershell ```shell

Latest version **1.0.11** (published 2017-10-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install asitis-searchbar
pnpm add asitis-searchbar
yarn add asitis-searchbar
bun add asitis-searchbar
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.11 |
| Published | 2017-10-31 |
| First published | 2017-10-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Asitis AB |
| Maintainers | fralle |
| Keywords | Asitis, react, search, component |

## Links

- npm: https://www.npmjs.com/package/asitis-searchbar
- npm.io page: https://npm.io/package/asitis-searchbar

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.0.0
- [react-dom](https://npm.io/package/react-dom.md) ^16.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.0
- [file-loader](https://npm.io/package/file-loader.md) ^1.1.4
- [react-event-listener](https://npm.io/package/react-event-listener.md) ^0.5.0

## Recent versions

- 1.0.11 (latest) — 2017-10-31
- 1.0.10 — 2017-10-06
- 1.0.9 — 2017-10-03
- 1.0.8 — 2017-10-03
- 1.0.7 — 2017-10-03
- 1.0.6 — 2017-10-03
- 1.0.5 — 2017-10-03
- 1.0.4 — 2017-10-03
- 1.0.3 — 2017-10-03
- 1.0.2 — 2017-10-03
- 1.0.1 — 2017-10-02

## README

# Asitis React Searchbar

## Installation
Execute one of the following commands in powershell
```shell

  # Yarn users
  yarn global add asitis-searchbar

  # NPM users
  npm install --save asitis-searchbar

```

---

## Usage
To import this component use the following:
```javascript
  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  | <Element />                 |
| ResultLastItem  | node | func           | NO       | Element for show more-link                                                 | <Element />                 |
| data            | array : object        | NO       | Array of objects, each with its array                                      | Small array with objects    |
| loader          | node | func           | NO       | Element for custom loader                                                  | <Element />                 |
| 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
```javascript
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

```

---
_Source: https://npm.io/package/asitis-searchbar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._