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 🙏

© 2026 – Pkg Stats / Ryan Hefner

react-nymph

v1.0.11

Published

基于Ant.Design扩展的React组件库.

Readme

注意: 不要单独使用,这是zent-kit初始化项目时的模版,请配合zent-kit使用。

react-nymph

!!! 请在此处填写你的文档最简单描述 !!!

使用场景

简单介绍组件使用场景

代码演示

请写在本段落

API

| 参数 | 说明 | 类型 | 默认值 | 备选值 | |------|------|------|--------|--------| | className | 自定义额外类名 | string | '' | '' | | prefix | 自定义前缀 | string | 'zent' | null |

欢迎使用zent-kit来初始化你的react-nymph组件

接下来就可以愉快的开发了~

注意:

请遵循上面的段落规范进行开发 本部分和以下部分为文档,正式发布前请删除

zent-kit

组件库开发脚手架

NPM

Install

npm install zent-kit -g

初始化组件

zent-kit init <your component name>

初始化一个组件目录,组件的模版从zent-seed下载。

开发模式

zent-kit dev

创建一个本地服务器,同时watch本地代码修改。

测试

zent-kit test

集成了Jest测试框架,用来跑组件的单元测试。

打包

zent-kit prepublish

打包src目录下的文件,babel转码的文件会输出到lib目录下,同时dist目录下会生成一个包含所有代码的UMD模块文件。

File Structure

// 源文件(由开发者编写)
-- src
    // 组件源文件目录
-- assets
    // sass源文件目录
-- examples
    // demo文件目录
-- package.json

// 生成文件(由zent-kit生成)
-- README.md
    // 由package.json和src下文件生成
-- lib
    // 经过babel转码的组件文件以及编译过的css
-- dist
    // 经过webpack打包的,符合UMD规范的组件文件

Style

  • 考虑到让用户更加容易自定义样式,尽量不要在组件源文件当中import样式文件,应该在examples目录下的文件中进行import
  • 用户如果需要使用组件样式,可以直接引入我们在assets文件夹下的sass源文件,或者lib文件夹下编译完成的css文件

README

README文件的规范包含:

-- 描述
    // 必选项:简单描述包特性(写在package.json中)
-- 使用场景
    // 可选项:简单描述组件场景(写在src下文件中)
-- tips
    // 可选项:一些简单的设计思想的描述,或者特殊接口的介绍(写在src下文件中)
-- API
    // 必选项:介绍本组件的使用方式(写在src下文件中)

package.json

如果不使用zent-kit init,自行编写的package.json需参考以下代码

{
  ...
  "name": "组件名称",
  "description": "这是一个React组件的描述",
  "main": "./lib/index.js",
  "scripts": {
    "dev": "zent-kit dev",
    "lint": "eslint ./src",
    "prepublish": "npm run lint && zent-kit prepublish"
  },
  "files": [
    "src/",
    "assets/",
    "examples/",
    "lib/",
    "dist/"
  ],
  "dependencies": {
      ...
  },
  "devDependencies": {
      ...
  }
  ...
}