可定制React自动完成搜索组件Turnstone实现示例

目录
  • 正文
  • 特点
  • 如何使用它
    • 1.安装并导入Turnstone
    • 2.基本使用方法
    • 3.默认的组件道具
  • 预览

正文

一个高度可定制的、易于使用的React自动完成搜索组件。

特点

  • 轻量级的React搜索框组件
  • 用可定制的标题将来自多个API或其他数据源的搜索结果分组
  • 指定列表框选项的最大数量，以及每组的加权显示比例
  • 用你自己的React组件完全定制列表框选项。添加图片、图标、额外的子选项、按组或索引的不同视觉处理等等......
  • 在输入的文本下面显示typeahead自动建议文本
  • 使用各种CSS方法，包括CSS模块和Tailwind CSS，可轻松实现风格化。
  • 在移动屏幕尺寸下，搜索输入可以很容易地固定在屏幕顶部，并有可定制的取消/返回按钮来退出。
  • 多个回调，包括。onSelect,onChange,onTab,onEnter 以及更多...
  • 内置的WAI-ARIA可访问性
  • 使用箭头、Tab和Enter键的键盘高亮和选择
  • 自动缓存以减少数据的获取
  • 退步文本输入，以减少数据的取用
  • 可选的清除按钮（可定制）。
  • 可定制的占位符文本
  • 使用插件添加更多的功能
  • 以及更多...

如何使用它

1.安装并导入Turnstone

# NPM
$ npm i turnstone
import React from 'react'
import Turnstone from 'turnstone'

2.基本使用方法

const App = () => {
  const listbox = {
    data: ['react', 'vue', 'angular']
  }
  return (
    <Turnstone listbox={listbox} />
  )
}

3.默认的组件道具

autoFocus: false,
cancelButton: false,
cancelButtonAriaLabel: 'Cancel',
clearButton: false,
clearButtonAriaLabel: 'Clear contents',
debounceWait: 250,
defaultListboxIsImmutable: true,
disabled: false,
id: randomId(),
listboxIsImmutable: true,
matchText: false,
maxItems: 10,
minQueryLength: 1,
placeholder: '',
styles: {},
typeahead: true,
Cancel: () => 'Cancel',
Clear: () => '\u00d7'

预览

The postCustomizable Autocomplete Search Component For React - Turnstoneappeared first onReactScript.

以上就是可定制React自动完成搜索组件Turnstone实现示例的详细内容，更多关于React自动搜索组件Turnstone的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React Native提供自动完成的下拉菜单的方法示例

    目录 正文 如何使用它 1.安装 2.导入自动完成的下拉组件 3.基本使用方法 4.数据集应该是一个JS对象或数组 5.可用的道具 预览 正文 一个具有搜索和自动完成(typeahead)功能的React Native的下拉项目选择器. 如何使用它 1.安装 # Yarn $ yarn add react-native-autocomplete-dropdown # NPM $ npm i react-native-autocomplete-dropdown 2.导入自动完成的下拉组件 impo

  • 适用于React Native 旋转木马应用程序介绍

    适用于React Native 旋转木马应用程序介绍

    目录 正文 如何使用它 1.安装并导入 react-native-intro-carousel 2.示例应用程序 预览 正文 一个带有分页功能的介绍页面旋转木马(onboarding)动画. 如何使用它 1.安装并导入 react-native-intro-carousel # Yarn $ yarn add react-native-intro-carousel # NPM $ npm i react-native-intro-carousel import * as React from '

  • React 程序设计简单的轻量级自动完成搜索框应用

    React 程序设计简单的轻量级自动完成搜索框应用

    目录 实现效果 如何使用它 1.安装并导入该组件 2.将ReactSearchBox 组件添加到应用程序中 3.定义你的自动建议列表的数据 4.所有可用的组件道具 预览 实现效果 一个为React应用程序设计的简单的轻量级自动完成搜索框. 如何使用它 1.安装并导入该组件 # Yarn $ yarn add react-search-box # NPM $ npm i react-search-box import React, { Component } from "react";

  • 可定制react18 input otp 一次性密码输入组件

    可定制react18 input otp 一次性密码输入组件

    目录 正文 主要特点 基本用法 1.安装和导入 2.将OtpInput组件添加到应用程序中 3.所有默认的道具 预览 正文 一个完全可定制的.用于React驱动的应用程序的一次性密码(OTP).电话号码和pin码输入组件. 主要特点 它在React和ionic应用程序上都很好用.在手机上也能正常工作. 你可以用inputNum道具只指定数字输入. 在网页和手机上与剪贴板粘贴功能完美配合. npm上唯一支持'enter'键提交的OTP输入包. 在Android上没有OTP粘贴问题. 在iOS ch

  • 可定制React自动完成搜索组件Turnstone实现示例

    可定制React自动完成搜索组件Turnstone实现示例

    目录 正文 特点 如何使用它 1.安装并导入Turnstone 2.基本使用方法 3.默认的组件道具 预览 正文 一个高度可定制的.易于使用的React自动完成搜索组件. 特点 轻量级的React搜索框组件 用可定制的标题将来自多个API或其他数据源的搜索结果分组 指定列表框选项的最大数量,以及每组的加权显示比例 用你自己的React组件完全定制列表框选项.添加图片.图标.额外的子选项.按组或索引的不同视觉处理等等...... 在输入的文本下面显示typeahead自动建议文本 使用各种CSS方

  • React文字展开收起组件的实现示例

    React文字展开收起组件的实现示例

    目录 前言 背景 开发 1.1 定义组件所需字段 1.2 获取截断后的文字 1.3 获取展开收起按钮 1.4 展开收起逻辑 1.5 完整代码 1.5.1 逻辑代码 1.5.2 样式代码 1.6 安装使用组件 资源 前言 最近想把在项目中封装的一些公用组件奉献出来,毕竟独乐乐不如众乐乐,好东西就要大家分享.这次还是来聊实战,主题就是文字展开收起组件的实现过程,这个需求在前端项目中也算常见的需求了,可能你已经在项目中使用了自己或别人封装的组件,但是这次还是希望你能耐心地看看我的实现过程,毕竟多一个思

  • React实现数字滚动组件numbers-scroll的示例详解

    目录 一.设计原理 二.实现方式 三.使用方式 四.参数说明 数字滚动组件,也可以叫数字轮播组件,这个名字一听就是非常普通常见的组件,第一反应就是想找找网上大佬的东西顶礼膜拜一下,这一搜,还真是没找到趁手的╮(╯▽╰)╭. 最近接了大屏的需求,数字滚动肯定是免不了的,所以开始撸袖子,造轮子了( numbers-scroll ). 首先给大家看下轮子的效果吧: 一.设计原理 如果要做到数字滚动效果,就一定要让数字有从下往上移动的感觉.如果只是纯粹的数字变化,显示出来的效果就会比较普通了,没有什么视

  • 通过npm或yarn自动生成vue组件的方法示例

    通过npm或yarn自动生成vue组件的方法示例

    不知道大家每次新建组件的时候,是不是都要创建一个目录,然后新增一个.vue文件,然后写template.script.style这些东西,如果是公共组件,是不是还要新建一个index.js用来导出vue组件.虽然有vscode有代码片段能实现自动补全,但还是很麻烦,今天灵活运用scripts工作流,自动生成vue文件和目录. 实践步骤 安装一下chalk,这个插件能让我们的控制台输出语句有各种颜色区分 npm install chalk --save-dev yarn add chalk --s

  • 手把手带你用React撸一个日程组件

    手把手带你用React撸一个日程组件

    目录 业务背景 使用技术 技术难点 设计思路

  • 深入理解React中es6创建组件this的方法

    首发于:https://mingjiezhang.github.io/. 在JavaScript中,this对象是运行时基于函数的执行环境(也就是上下文)绑定的. 从react中的demo说起 Facebook最近一次更新react时,将es6中的class加入了组件的创建方式当中.Facebook也推荐组件创建使用通过定义一个继承自 React.Component 的class来定义一个组件类.官方的demo: class LikeButton extends React.Component

  • ES6下React组件的写法示例代码

    本文主要跟大家分享了ES6下React组件的写法示例,下面来一起看看详细的介绍: 一:定义React组件 class Hello extends React.Component { render() { return <h1>Hello, {this.props.value}</h1>; } } 二:声明prop类型与默认prop class Hello extends React.Component { // ... } Hello.propTypes = { value: Re

  • React Native自定义标题栏组件的实现方法

    大家好,今天讲一下如何实现自定义标题栏组件,我们都知道RN有一个优点就是可以组件化,在需要使用该组件的地方直接引用并传递一些参数就可以了,这种方式确实提高了开发效率. 标题栏是大多数应用界面必不可少的一部分,将标题栏剥离出来做成一个组件很有必要.今天先讲一个不带返回按钮的标题栏.废话少说,直接上代码: /** * 封装公共的标题头,没有返回按钮 */ 'use strict'; import React, { Component } from 'react'; import { Text, Vi

  • 一个基于react的图片裁剪组件示例

    开始 写了一年多vue,感觉碰到了点瓶颈,学习下react找找感觉.刚好最近使用vue写了个基于cropperJS的图片裁剪的组件,便花费了几个晚上的功夫用react再写一遍.代码地址 项目是使用create-react-app来开发的,省去了很多webpack配置的功夫,支持eslint,自动刷新等功能,使用前npm install并npm start即可.推荐同样是新学习react的人也用用看. 项目写的比较简陋,自定义配置比较差,不过也是完成了裁剪图片的基本功能,希望可以帮助到初学reac

随机推荐