npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

selector2

v1.1.7

Published

Virtual selector component for react.js

Downloads

12

Readme

selector2

virtual-selector的化身(取消了ES7的语法,改为纯ES6),一款简单易用的虚拟选择器组件

Build Status

安装

$ npm install selector2 --save

文档

Wiki

编译

如果你想修改其源码,你可以在此项目根目录下运行以下命令:

$ npm start

或者

$ gulp

例子

import Selector2 from 'Selector2';
// ...
React.render(<Selector2 options={...} multiple={true} />, document.getElementById('selector2'));

文档

请先看Wiki,然后再使用。

Featrues

  • [x] 组件细分
  • [x] 支持皮肤
  • [x] 远程数据获取
  • [x] 键盘操作优化
  • [x] 滚动事件优化
  • [x] 支持禁用指定选项
  • [x] 支持分组
  • [x] 自定义模板
  • [x] 键盘操作代码优化

贡献

非常欢迎大家贡献代码,共同完善此项目。

Issues

如果在使用过程中遇到问题,请先查阅文档,如确认是该组件的问题,请提供线上案例以方便作者查找原因,然后再提issues

LICENSE

MIT

更新日志

  • v1.1.7

    • 鼠标经过时,将当前选项置为备选状态
    • 添加 shortcuts 选项来决定是否启用键盘操作
  • v1.1.6

    • 添加是否默认展开的选项:autoOpen
  • v1.1.5

    • 样式重写(搭配bootstrap使用)
  • v1.1.4

    • 样式调整
    • 某些情况下onChange触发不了优化
  • v1.1.3

    • #6 某些情况下onChange触发不了
    • onSelectClose 默认参数改为 true
  • v1.1.2

    • 样式调优
    • 解决单页应用下切换页面下拉框不关闭的问题
  • v1.1.1

    • 默认值传入字符串无法默认选中问题修复
    • 样式增加命名空间
  • v1.1.0

    • 支持React 0.14.x
  • v1.0.9

    • 键盘操作代码优化
    • 添加关闭下拉框条件,在某些情况下阻止事件冒泡有问题
  • v1.0.8

    • 滚动事件优化
    • 删除冗余的代码
  • v1.0.7

    • 远程数据获取
    • 修复分组遗留的问题
  • v1.0.6

  • v1.0.5

  • v1.0.4

    • 添加位置检测
    • 打开下拉列表时自动跳转到最后一个已选项的位置
    • 修改默认边框宽度
  • v1.0.3

    • 添加nullable选项(单选时有效,多选时需要手动控制,因为多选可清除)
    • Bug fix:clear元素显示逻辑写错
  • v1.0.2

    • 皮肤重新配色
    • 键盘事件优化
    • 自定义模板
    • 支持选项禁用
  • v1.0.1

    • 支付皮肤
    • Bug fix:搜索不到结果时,删除输入的关键字,依旧没结果 #2
  • v1.0.0

    • 单选
    • 多选
    • 清除所有
    • 移除单个已选
    • 关键字搜索