react select search下載 - react select search原始碼下載

react select search

其他源碼

1.0.0

下載

️尋找維護者

首先，我要感謝大家多年來的大力支持。這是我第一個開源項目，也是我第一個成功的專案。我對這 33 個人非常感激！貢獻者，如果沒有你們，這個專案就不可能運作。

去年發生了很多事。我有我的第一個兒子，我有一些耗時的自由工作和一些成長的新創公司。這佔據了開源的時間，我覺得我不能再公正地對待這個元件了。至少我自己不是。

我仍然相信微型、超快且零依賴的選擇組件。如果有人想與我共同維護此功能，請聯絡我們討論後續步驟。給我發送電子郵件至 [email protected] 或在 Twitter 上聯繫我

反應選擇搜尋

示範 · 快速啟動 · 設定 · Headless

特徵

輕量級，零依賴
無障礙
無頭模式
基本的 HTML 選擇功能，包括多個
搜尋/過濾選項
非同步選項
應用渲染器來更改標記和行為
鍵盤支援
帶有群組名的群組選項，可以搜尋群組名
完全可設計樣式

安裝

使用 npm ( npm i react-select-search ) 或 YARN ( yarn add react-select-search ) 安裝它，然後像平常一樣匯入它。

快速啟動

 import SelectSearch from 'react-select-search' ;

/**
 * The options array should contain objects.
 * Required keys are "name" and "value" but you can have and use any number of key/value pairs.
 */
const options = [
    { name : 'Swedish' , value : 'sv' } ,
    { name : 'English' , value : 'en' } ,
    {
        type : 'group' ,
        name : 'Group name' ,
        items : [
            { name : 'Spanish' , value : 'es' } ,
        ]
    } ,
] ;

/* Simple example */
< SelectSearch options = { options } value = "sv" name = "language" placeholder = "Choose your language" / >

有關更多範例，您可以查看 Stories 目錄。

您還需要一些 CSS 來使其看起來正確。範例主題可以在 style.css 中找到。您也可以導入它：

 import 'react-select-search/style.css'

與 SSR 一起使用

要與 SSR 一起使用，您可能需要使用 commonjs 套件 (react-select-search/dist/cjs)。如果您想使用範例主題（style.css），您需要檢查您的建置腳本是否操作類別名，例如縮小它們。如果是這種情況，您可以使用 CSS 模組從 style.css 檔案取得類別名稱，並使用 className 物件套用它們。可以在此處以及此處查看範例 https://react-select-search.com/?path=/story/custom--css-modules。

帶鉤子的無頭模式

如果您想要完全控制（不僅僅是樣式和自訂渲染器），您可以使用掛鉤將資料傳遞到您自己的元件並自行建立。

 import React from 'react' ;
import { useSelect } from 'react-select-search' ;

const CustomSelect = ( { options , value , multiple , disabled } ) => {
    const [ snapshot , valueProps , optionProps ] = useSelect ( {
        options ,
        value ,
        multiple ,
        disabled ,
    } ) ;

    return (
        < div >
            < button { ... valueProps } > { snapshot . displayValue } < / button >
            { snapshot . focus && (
                < ul >
                    { snapshot . options . map ( ( option ) => (
                        < li key = { option . value } >
                            < button { ... optionProps } value = { option . value } > { option . name } < / button >
                        < / li >
                    ) ) }
                < / ul >
            ) }
        < / div >
    ) ;
} ;

配置

以下是您可以傳遞給元件的所有可用選項。需要沒有預設值的選項。

姓名	類型	預設	描述
選項	大批		請參閱下面的選項文檔
取得選項	功能	無效的	透過函數呼叫獲取選項，可以傳回非同步使用的承諾。請參閱取得選項以了解更多資訊。
過濾選項	大批	無效的	一個函數數組，它採用最後過濾的選項和搜尋查詢（如果有）。在 getOptions 之後運行。
價值	字串、數組	無效的	如果是多種模式，則該值應該是一個陣列。
多種的	布林值	錯誤的	如果您想要允許多個選定選項，請設定為 true。
搜尋	布林值	錯誤的	設定為 true 以啟用搜尋功能
殘障人士	布林值	錯誤的	停用所有功能
選擇時關閉	布林值	真的	選擇選項時，選擇框預設會模糊。將其設為 false 可防止此行為。
去抖	數位	0	搜尋時呼叫 get options 之前等待的毫秒數。
佔位符	細繩	空字串	如果未選擇任何選項和/或當搜尋欄位聚焦為空值時顯示。
ID	細繩	無效的	頂級元素上的 HTML ID。
自動完成	字串，開/關	離開	停用/啟用搜尋欄位中的自動完成功能。
自動對焦	布林值	錯誤的	自動對焦選擇
類別名	字串、對象	選擇搜尋框	設定基底類別字串或傳遞函數以實現完全控制。 Se 自訂類別名稱以了解更多資訊。
渲染選項	功能	無效的	呈現選項的函數。有關更多信息，請參閱自訂渲染器。
渲染組頭	功能	無效的	呈現群組標題的函數。有關更多信息，請參閱自訂渲染器。
渲染值	功能	無效的	呈現值/搜尋字段的函數。有關更多信息，請參閱自訂渲染器。
空消息	反應節點	無效的	為空選項清單設定空訊息，您可以提供不含參數的渲染函數，而不是純字串訊息
改變時	功能	無效的	接收和處理值變化的函數。
焦點	功能	無效的	焦點回調。
模糊	功能	無效的	模糊回調。

選項對象

選項物件可以包含您喜歡的任何屬性和值。唯一需要的就是name 。

財產	類型	描述	必需的
姓名	細繩	選項名稱	是的
價值	細繩	選擇權的價值	是，如果類型不是“群組”
類型	細繩	如果將類型設為“群組”，則可以新增將分組的選項數組	不
專案	大批	如果類型設為“group”，則將使用的選項物件數組	是，如果`type`設定為“群組”
殘障人士	布林值	設定為`true`以停用此選項	不

自訂類別名

如果將字串設為className屬性值，則元件將使用它作為所有元素的基礎。如果你想完全控制類別名，你可以傳遞一個有類別名稱的物件。存在以下鍵：

容器
價值
輸入
選擇
選項
排
選項
團體
組頭
被選中
突出顯示
正在載入
是多個
有焦點

自訂渲染器

如果 CSS 還不夠，您還可以控制元件不同部分的 HTML。

打回來	參數	描述
渲染選項	optionsProps：對象，optionData：對象，optionSnapshot：對象，className：字串	控制選項的呈現。
渲染組頭	名稱：字串	控制群組標題名稱的呈現
渲染值	valueProps：對象，快照：對象，className：字串	控制值/輸入元素的呈現

您渲染的元件需要 optionProps 和 valueProps 才能正常運作。例如：

 < SelectSearch renderValue = { ( valueProps ) => < input { ... valueProps } / > } / >

如果需要，請對其進行猴子修補，但請確保不要刪除重要的道具。

optionSnapshot 是一個包含物件狀態的物件： { selected: bool, highlighted: bool } 。

取得選項

您可以使用getOptions屬性非同步取得選項。您可以直接返回選項或透過Promise返回選項。

 function getOptions ( query ) {
    return new Promise ( ( resolve , reject ) => {
        fetch ( `https://www.thecocktaildb.com/api/json/v1/1/search.php?s= ${ query } ` )
            . then ( response => response . json ( ) )
            . then ( ( { drinks } ) => {
                resolve ( drinks . map ( ( { idDrink , strDrink } ) => ( { value : idDrink , name : strDrink } ) ) )
            } )
            . catch ( reject ) ;
    } ) ;
}