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 ) ;
    } ) ;
}