@ryze-digital/select-replace NPM

RYZE Digital Select Replace

Install

npm i @ryze-digital/select-replace --save

Usage

Scss

@use "@ryze-digital/select-replace";

Use the provided configure mixin to define your select replace defaults.

@include select-replace.configure(...);

Option	Type	Default	Description
fake-select	Map		Configuration options especially for the fake select (not option list)
fake-select.padding-inline-end	Number	`40px`	Area where in which the arrow down icon is centered in
fake-select.icon	Map		The arrow down icon (aka select box indicator)
fake-select.icon.color	Color	`#cccccc`
fake-select.icon.size	Number	`9px`

Check out the actual configure mixin for better understanding.

There are seperate mixins for the replaced select and the option list.

.select-replace {
    @include select-replace.fake-select();
}

.option-list {
    @include select-replace.option-list();
}

For accessibility reasons we do not simply hide the original <select> field, because it should remain focusable. Therefore, our JavaScript adds a class called visually-hidden to it after it is initialized. To visually hide elements that should still be usable by screen readers, we have a mixin in our scss-utilities called visually-hidden. You could either use it to create a utility class with it, to separately hide only selected <select> fields ...

.visually-hidden {
    @include scss-utilities.visually-hidden();
}

... or you can use it to only hide all <select> field directly, if you plan to replace them all.

select {
    @include scss-utilities.visually-hidden();
}

JavaScript

import { SelectReplace } from '@ryze-digital/select-replace';

new SelectReplace({...}).init();

Option	Type	Default	Description
el	HTMLElement	`document.querySelector('select')`	Container to which the library should be bound
optionList	object		Configuration options especially for the option list
optionList.calcWidth	boolean	`true`	Make option list the same width as select field
optionList.appendTo	HTMLElement	`document.body`	Container in which the option list get appended
classes	object	{ fakeSelect: 'select-replace', placeholder: 'placeholder', optionList: 'option-list', hideSelect: 'visually-hidden', focussed: 'has-focus'}	Selectors that are used internally or states that will be added to elements
i18n	object		Internationalization settings
i18n.languages	array	`['en', 'de']`	Available translations (extend this array, if you provide more)
i18n.selectedOptions	object	{ en: 'selected', de: 'ausgewählt'}	Translations for n selected
i18n.use	string	`en`	Fallback language to use, if document language is not available in `i18n.languages`

Public methods

The folloing methods can be called on an instance of SelectReplace:

Calling the constructor just creates a new instance of SelectReplace and does not replace the <select> field. You need to call init() to initiate the needed DOM modifications. This method does not have any parameters yet.

After doing some modifications to the <select> field, you have to call update() to reflect these changes to the fake select. This method does not have any parameters yet.

You can manually call reposition() to recalculate and update the positions of the fake dropdown list. This method does not have any parameters yet.