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

react-time-down

v1.0.1

Published

该react组件用于日期倒计时

Downloads

15

Readme

NumWheel 数字滚动特效组件

安装

npm i -S react-time-down

参数说明

// 设置参数类型
TimeDown.propTypes = {
  className: PropTypes.string,        // 自定义样式名称
  date: PropTypes.instanceOf(Date),   // 截止时间,必须是日期格式的
  separate: PropTypes.array,          // 天,小时,分钟,秒隔符
}

用法

import { TimeDown } from 'react-time-down';
<TimeDown date={new Date(2018,10,11)} />

发布

  • 本项目可以作为平常的开发项目来使用,用法如下:

    1. 把该项目git clone到本地
    2. npm install
    3. npm run start 或者 npm run page
    4. 浏览器打开:http://localhost:8080/组件名称,就可以看到本组件的开发原始案例了
    5. 开发完成要发布上线的话,可以运行npm run build即可在本地dist目录下看到压缩之后的发布包了
  • 本项目也可以作为开发自己的 react library 来使用,用法如下:

    1. 这里如果要开发自己的react library,就可以修改components 目录下的组件,开发自己的组件即可
    2. npm run publish 发布开发好的包到本地 lib 目录下
    3. 自己本地开发完成要发布npm的话,查看下面npm publish 流程

npm publish

 # 如果npm设置了国内镜像,要先设置成npm原来的镜像地址,否则不用这一步
npm config set registry https://registry.npm.taobao.org
# 登录 npm,没有的话需要去 npm 官网注册一个账号
npm login
# 发布,这里如果重新发布,需要加大package.json中的version,这里要注意如果报错了,那可能是package.json中的name(name不能大写)属性和第三方的重名了,需要修改成唯一才能发布
npm publish