@jaycverg/select-pure NPM

SelectPure JavaScript component

Installation

NPM

npm i @jaycverg/select-pure --save

Yarn

yarn add @jaycverg/select-pure

Usage

import SelectPure from "@jaycverg/select-pure";

new SelectPure(element, config);

`element` // Required. Either selector or HTML node.
`config` // Required. Configuration object.

Configuration

Property	Required	Type	Description
option	true	Array	Collection of options to be rendered. Each `option` consists of `value`, `label` and optional property `disabled`. Properties for the single option object are listed below.
classNames	false	Object	Object with custom classNames to be used inside select. In the next major version default classNames will be removed and this property will become required.
multiple	false	Boolean	`true` if multiple options can be selected.
autocomplete	false	Boolean	Adds autocomplete input. Disabled by default.
resetSearchOnSelect	false	Boolean	If `true`, search input text will be cleared on option selection. This only takes effect if `autocomplete` is `true`.
icon	false	String	If specified - `<i></i>` will be inserted inside `select-pure__selected-label`. Works only with `multiple` option set to `true`.
inlineIcon	false	HMTLElement	Custom cross icon for multiple select.
value	false	String \| Array	Initially selected value. If not provided - first option will be selected. If `multiple` is `true` -- `Array` should be provided.
placeholder	false	String	Placeholder for cases when value is not selected by default.
onChange	false	Function	Callback that returns value when option is being selected. Returns `Array` if `multiple` is `true`.
searchFilter	false	Function	Callback that handles filtering of items. This only takes effect if `autocomplete` is `true`. Function signature: `(searchKey, optionText) => boolean`.

option

Properties of a single option passed to the options Array in configuration.

Property	Required	Type	Description
value	true	String	Value of an option.
label	true	String	Label of an option.
disabled	false	Boolean	`true` if option is disabled. `false` by default.

classNames

In the next major version default classNames will be removed and this property will become required.

Property	Default value	Description
select	"select-pure__select"	Wrapper div.
dropdownShown	"select-pure__select--opened"	Applied to the wrapper when dropdown is shown.
multiselect	"select-pure__select--multiple"	Applied to the wrapper if it's a multiselect.
label	"select-pure__label"	Label span.
placeholder	"select-pure__placeholder"	Placeholder span.
dropdown	"select-pure__options"	Options dropdown.
option	"select-pure__option"	Single option.
optionDisabled	"select-pure__option--disabled"	Single option.
autocompleteInput	"select-pure__autocomplete"	Autocomplete input
selectedLabel	"select-pure__selected-label"	Selected label for multiselect.
selectedOption	"select-pure__option--selected"	Applied to option when selected.
placeholderHidden	"select-pure__placeholder--hidden"	Hides placeholder when the value is selected.
optionHidden	"select-pure__option--hidden"	Hides options that does not match autocomplete input.

API

Method	Description
value()	Returns currently selected value.
reset()	Resets currently selected value.

Structure

select-pure/
└── lib/
    └── select-pure.min.js

TODO

API method for updating select.
Mobile select support.
Drop support of default classNames (starting from 1.x.x versions).
Drop support of default icon, support only inline SVG instead. (starting from 1.x.x versions).

License

MIT

javascript select js

@infinitebrahmanuniverse/nolb-_jay @everything-registry/sub-chunk-482

0.6.0-alpha.1

4 years ago

0.6.0-alpha.0

4 years ago