Skip to content

Latest commit

 

History

History
284 lines (183 loc) · 6.43 KB

search-box.md

File metadata and controls

284 lines (183 loc) · 6.43 KB

SearchBox

Source

An autocomplete input to search through a list of entries.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { SearchBox } from 'chayns-components';

// ...

<SearchBox {...} />

Props

The SearchBox-component takes the following props:

Name Type Default Required
onSelect function
disabled boolean false
list Array<object> | Array<string> | Array<number>
listKey string 'key'
listValue string 'value'
sortKey string
className string
defaultValue string | number
stopPropagation boolean false
parent function | ReactNode
style { [key: string]: string | number }
value string | number
inputValue string
showListWithoutInput boolean false
inputDefaultValue string
onChange function
autoSelectFirst boolean false
highlightInputInResult boolean true
addInputToList boolean false
emptyKey string | number
hasOpenCloseIcon boolean false
onBlur function

onSelect

onSelect?: function

A callback that will be invoked when a value was selected.

disabled

disabled?: boolean

Disables any user interaction and renders the search box in a disabled style.

list

list?: Array<object> | Array<string> | Array<number>

An array of items to select from.

listKey

listKey?: string

The property name of a unique identifier in the list items.

listValue

listValue?: string

The property name of the name of the list items that will be shown in the dropdown.

sortKey

sortKey?: string

The property name to use for sorting the list. Default is listValue

className

className?: string

A classname string that will be set on the container component.

defaultValue

defaultValue?: string | number

The default value of the search box as a key to one of the list items.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events to parent elements.

parent

parent?: function | ReactNode

A DOM element into which the overlay will be rendered.

style

style?: { [key: string]: string | number }

A React style object that will be applied to the outer-most container.

value

value?: string | number

The current value of the search box as a key to one of the list items.

inputValue

inputValue?: string

The current value of the text input.

showListWithoutInput

showListWithoutInput?: boolean

Wether the list should be shown if there is no user input.

inputDefaultValue

inputDefaultValue?: string

The default value of the input field. Has no effect when used with the inputValue-prop.

onChange

onChange?: function

The onChange-callback for the input element.

autoSelectFirst

autoSelectFirst?: boolean

Wether the first list item should be automatically selected.

highlightInputInResult

highlightInputInResult?: boolean

Whether the search term should be marked in the selection

addInputToList

addInputToList?: boolean

Whether the input value should be added to the end of the result list. Allows also values which are not in the list.

emptyKey

emptyKey?: string | number

The key of the default value if nothing is selected or typed into the input.

hasOpenCloseIcon

hasOpenCloseIcon?: boolean

Whether the input should have a small icon to open and close the result list.

onBlur

onBlur?: function

A callback that will be invoked when the user leaves the input.