Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-select-search

Package Overview
Dependencies
Maintainers
1
Versions
108
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-select-search

React powered selectbox with search

  • 1.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
21K
increased by11%
Maintainers
1
Weekly downloads
 
Created
Source

React Select Search

Coverage Status npm

Features

  • Full test coverage
  • Accessible
  • Basic HTML select functionality, including multiple
  • Search/filter options
  • Apply renderers to change markup and behavior
  • Keyboard support
  • Group options with group names, you can search group names
  • Fully stylable

Demo

Live demo can be found here: http://tbleckert.github.io/react-select-search/

Demo

How to use

Install it with npm (npm install react-select-search --save) and import it like you normally would.

import SelectSearch from 'react-select-search';

/**
 * The options array should contain objects.
 * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
 */
const options = [
    {name: 'Swedish', value: 'sv'},
    {name: 'English', value: 'en'},
    {
        type: 'group',
        name: 'Group name',
        items: [
            {name: 'Spanish', value: 'es'},
        ]
    },
];

/* Simple example */
<SelectSearch options={options} defaultValue="sv" name="language" placeholder="Choose your language" />

For examples you can take a look at the example file.

You will also need some CSS to make it look right. Example theme can be found in style.css

Configuration

Below is all the available options you can pass to the component. Options without defaults are required.

NameTypeDefaultDescription
optionsarraySe the options documentation below
defaultValuestring, arrayundefinedSet only a defaultValue for uncontrolled usage. The value should be an array if multiple mode.
valuestring, arrayundefinedUse together with onChange for controlled usage. The value should be an array if multiple mode.
multiplebooleanfalseSet to true if you want to allow multiple selected options.
searchbooleanfalseSet to true to enable search functionality
disabledbooleanfalseDisables all functionality
placeholderstringempty stringDisplayed if no option is selected and/or when search field is focused with empty value.
autoCompletestring, on/offoffDisables/Enables autoComplete functionality in search field.
autoFocusbooleanfalseAutofocus on select
fuseobject, booleantrueUse fuse.js to apply fuzzy search on search. Set to true to use default options or pass a fuse.js config option. If search is enabled and no filterOptions callback is passed, this will be set to true automatically.
classNamestring, objectselect-search-boxSet a base class string or pass in a className object for complete controll. Se custom classNames for more.
onChangefunctionnullFunction to receive and handle value changes. Use together with the value prop for controlled component usage.
renderOptionfunctionnullFunction that renders the options. See custom renderers for more.
renderValuefunctionnullFunction that renders the value/search field. See custom renderers for more.
renderGroupHeaderfunctionnullFunction that renders the group header. See custom renderers for more.
filterOptionsfunctionnullFilter the options list. See filter options for more.

Keywords

FAQs

Package last updated on 05 Nov 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc