shadcn-ui 增加 multi-select
前言
multi-select 是一個很常見的組件，但 shadcn-ui 並沒有提供
後來查到Fancy Multi Select，但還滿陽春的
因為目前專案使用了不少React-Select，默默地就實現了他所有的功能
demo: shadcn-ui expansions / Multiple Selector
功能
- 僅使用
shadcn-ui的Command組件(基於cmdk)，沒有其他套件 - 支援 API 查詢，並且可以自訂查詢的 debounce 時間
- 支援當沒有符合的選項時，可直接建立新選項(即
React-Select裡的Creatable Selector) - 支援自訂
loading spinner、empty indicator，僅須傳參數設定 - 支援選項分組(
Grouping) - 支援自訂最大選擇數量、最大輸入文字長度、固定選項
- 可輕易與
react-hook-form整合 - 支援預設不選取任何選項 (
cmdk目前無此功能，此為 workaround 解法。更多資訊詳見cmdk issue) - 封裝好
ref，使用方式就像一般的input組件 - 可透過參數調整
className、badgeClassName，盡量不必去修改原始碼
最重要的是，只需要 Copy and Paste，程式碼就是你的了！
使用方式
shadcn-ui expansions / Multiple Selector 已經提供了所有功能的範例用法
這裡就不再贅述