# searchkit-multiselect

> searchkit-multiselect React component

Latest version **0.0.1** (published 2016-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install searchkit-multiselect
pnpm add searchkit-multiselect
yarn add searchkit-multiselect
bun add searchkit-multiselect
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2016-04-04 |
| First published | 2016-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 17 |
| Author | Gregory Potdevin |
| Maintainers | gpotdevin |
| Keywords | react-component, react components, searchkit, elasticsearch, elastic search, react, search, widgets |

## Links

- npm: https://www.npmjs.com/package/searchkit-multiselect
- Repository: https://github.com/GregoryPotdevin/searchkit-multiselect
- Homepage: http://www.appcraft.fr/
- Issues: https://github.com/GregoryPotdevin/searchkit-multiselect/issues
- npm.io page: https://npm.io/package/searchkit-multiselect

## Dependencies (1)

- [react-select](https://npm.io/package/react-select.md) ^1.0.0-beta12

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2016-04-04

## README

# searchkit-multiselect

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]

MultiSelect component for Searchkit, using react-select

[build-badge]: https://img.shields.io/travis/user/repo/master.svg?style=flat-square
[build]: https://travis-ci.org/user/repo

[npm-badge]: https://img.shields.io/npm/v/npm-package.svg?style=flat-square
[npm]: https://www.npmjs.org/package/npm-package

[coveralls-badge]: https://img.shields.io/coveralls/user/repo/master.svg?style=flat-square
[coveralls]: https://coveralls.io/github/user/repo

![Preview](doc/preview.png?raw=true "Preview")

## Installation

`npm install searchkit-multiselect --save`

## Features

- MultiSelect listComponent for `RefinementListFilter` and other compatible components
- Dynamically filter the facet list
- See `react-select` for a complete list of features

### Initial style

![Initial](doc/initial.png?raw=true "Initial")

### Dropdown

![Dropdown](doc/dropdown.png?raw=true "Dropdown")

## Usage

```
import MultiSelect from "searchkit-multiselect"
```

```
<RefinementListFilter
  id="actors"
  title="Actors"
  field="actors.raw"
  operator="AND"
  listComponent={MultiSelect}
  size={200}/>
```

It is recommended to increase the size to benefit from the filter functionnality.

## Example

```
const Demo = React.createClass({
  render() {
    return (
      <SearchkitProvider searchkit={searchkit}>
        <Layout>
          <TopBar>
            <SearchBox
              autofocus={true}
              searchOnChange={true}
              prefixQueryFields={["actors^1","type^2","languages","title^10"]}/>
          </TopBar>
          <LayoutBody>
            <SideBar>
              <HierarchicalMenuFilter
                fields={["type.raw", "genres.raw"]}
                title="Categories"
                id="categories"/>
              <RefinementListFilter
                id="actors"
                title="Actors"
                field="actors.raw"
                operator="AND"
                listComponent={MultiSelect}
                size={200}/>
              <RefinementListFilter
                id="writers"
                title="Writers"
                field="writers.raw"
                operator="AND"
                listComponent={MultiSelect}
                size={200}/>
            </SideBar>
            <LayoutResults>
              <Hits mod="sk-hits-grid" hitsPerPage={10} itemComponent={MovieHitsGridItem}
                sourceFilter={["title", "poster", "imdbId"]}/>
              <NoHits/>
            </LayoutResults>
          </LayoutBody>
        </Layout>
      </SearchkitProvider>
    )
  }
})
```

## License

MIT

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