@norama.matema/solid-multiselect v0.3.0
MultiSelect
This is a fork of Solid MultiSelect.
The original Demo is deployed HERE.
Changes:
MultiSelect component is included in a SolidJS application containing examples from the Demo. The MultiSelect component source is moved to the
src/components
directory.Major property changes, see below.
Added
searchable
property: search box with filtering iftrue
, no filtering iffalse
. Default:true
. It is useful to set tofalse
for simple selects with a few options only.MultiSelect.css
is no longer imported, copy to your project, include and modify accordingly.
Properties
type
: selector type:single
: single selectmultiChips
: multi select with chip display in selector (default)multiList
: multi select with list display above selector
options
: option array of strings, numbers or recordsselectedValues
: array of selected optionsidKey
: key ofid
field (unique ID for comparison) in case of record optionsdisplayKey
: key of field to display in case of record in case of record options (default: same asidKey
)selectedOptionDisplay
: selected option display:show
: leave selected option in list and enable multiple selection of same item (default fortype = 'single'
: leave item in list but no multiple selection)hide
: remove selected options from list (default fortype = 'multiChips'
andtype = 'multiList'
)checkbox
: chow checkbox which toggles selected state
optionDisplay
:(IOption) => 'show' | 'hide' | 'disabled'
determines whether the option is to be shown / hidden / shown as disabled (default:'show'
for all)selectionLimit
: max number of selected itemssearchable
:true
for quick search input in selectorcaseSensitiveSearch
:true
for case sensitive quick searchdisabled
:true
if disabledid
: widgetid
showArrow
: show down arrowgroupByKey
: key of field for grouping options in case of record options, the key is also used for group titlegroupByDefault
: group if group-by-key is missing (default: 'Others')onSelect
:(selectedList: IOption[], selectedItem: IOption) => void
select callbackonRemove
:(selectedList: IOption[], removedItem: IOption) => void
remove callbackonSearch
:(value: string) => void
searchplaceholder
: placeholder in search input (default: 'select')emptyRecordMsg
: no record matching search string message (default: 'No records found')loading
:true
if loading stateloadingMessage
: message shown in loading state (default: 'loading...')style
: custom styles grouped by components:
{
multiSelectContainer?: JSX.CSSProperties
optionListContainer?: JSX.CSSProperties
selectedListContainer?: JSX.CSSProperties
optionContainer?: JSX.CSSProperties
option?: JSX.CSSProperties
inputField?: JSX.CSSProperties
notFound?: JSX.CSSProperties
loadingMessage?: JSX.CSSProperties
}
CustomRemover
:() => JSX.Element
remover component which removes item from selection upon click (default:X
sign, relevant only iftype
is notsingle
)CustomSelectedItem
:(props: RemovableItemProps) => JSX.Element
selected item renderer whereRemovableItemProps
is
{
value: IOption
displayKey?: string
disabled: boolean
style: JSX.CSSProperties
RemoverComponent: ({ value }: {value: IOption}) => JSX.Element
}
RemoverComponent
will be a wrapper around the possiby custom remover component, just render with the value, e.g.:
CustomRemover={() => <div style={{ 'font-size': 'small' }}>🗑</div>}
CustomSelectedItem={({ value, disabled, RemoverComponent }) => (
<div
style={{
opacity: disabled ? 0.6 : 1,
background: 'lightgreen',
'border-radius': '5px',
padding: '3px',
margin: '0 3px',
display: 'flex',
'align-items': 'center',
width: 'fit-content',
}}
>
{value['value']}
<Show when={!disabled}>
<RemoverComponent value={value} />
</Show>
</div>
)}
Install as npm package
npm i '@norama.matema/solid-multiselect'
Clone and Run project
Git clone
git clone https://github.com/norama/solid-multiselect.git .
Install dependencies
$ npm install # or pnpm install or yarn install
Build and publish npm package
npm run npmbuild
Creates the compiled component files in the npmdist
directory.
npm publish
Publishes the component, also runs the above npm build script before.
Do not forget to increase the version in package.json
.
Solid-JS application with MultiSelect examples
In the project directory, you can run:
npm dev
or npm start
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
npm run build
Builds the app for production to the dist
folder.
It correctly bundles Solid in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
Deployment
You can deploy the dist
folder to any static host provider (netlify, surge, now, etc.)