Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thisbeyond/solid-select
The Select component for Solid.
https://github.com/thisbeyond/solid-select
Last synced: about 1 month ago
JSON representation
The Select component for Solid.
- Host: GitHub
- URL: https://github.com/thisbeyond/solid-select
- Owner: thisbeyond
- License: mit
- Created: 2022-01-14T23:20:20.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-07-06T21:55:23.000Z (5 months ago)
- Last Synced: 2024-11-02T05:48:07.833Z (about 1 month ago)
- Language: TypeScript
- Homepage: https://solid-select.com
- Size: 625 KB
- Stars: 178
- Watchers: 1
- Forks: 17
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-solid-js - Solid Select
README
- **Built for [Solid](https://solidjs.com/):** leverages fine-grained reactivity
primitives for coordination.
- **Flexible:** built to support a wide range of cases, from single selects to
multi-select autocomplete lists.
- **Extendable:** use the pre-fabricated components or build your own from the
core primitives.
- **Zero dependencies:** Just pair with Solid and good to go.
## How do I get started? 🧭
Install it:
```bash
npm install @thisbeyond/solid-select
```
Use it:
```jsx
import { Select } from "@thisbeyond/solid-select";
import "@thisbeyond/solid-select/style.css";
const App = () => {
return (
);
};
export default App;
```
See more examples at https://solid-select.com
## What's implemented? ✔️
- [x] A high level `Select` component that can be configured with either a
static or dynamic list of options.
- [x] Support for single value selection or multiple value selection.
- [x] `createOptions` helper for configuring filterable options based on input
value (complete with match highlighting). Works with lists of plain strings or
can be passed a 'key' to filter against lists of objects. Can also be used to
configure creating new options on the fly.
- [x] Opt-in sensible default styling. Customise easily or style from scratch.
- [x] Composable building blocks to create your own control.
- [x] Lower level `createSelect` primitive if you just want the core logic.
## Who made this? ✍
[Martin Pengelly-Phillips](https://twitter.com/thesociablenet)
## Why did you make it?
I've been part of the [SolidJS community](https://discord.com/invite/solidjs)
for a while now and one of the things I really like is the emphasis on trying
things out and sharing them (https://hack.solidjs.com). The ecosystem is small
which creates a lot of opportunity and a lower barrier to entry for sharing I
find.
I published my first Solid library (https://solid-dnd.com) a short while back as
a first dabble in sharing what I had learnt on a personal project. That went
well so when I had to create a multi-select autocomplete control for another
personal project I knew I'd be sharing that too - and so `Solid Select` came to
be :)