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

rc-bullets

v1.5.16

Published

awesome barrage powered by CSS3 animation and built by react

Downloads

2,255

Readme

React 弹幕

🌈 基于 CSS3 Animation,使用 React 构建,可扩展,高性能。

NPM NPM downloads twitter

演示地址

👉zerosoul.github.io/rc-bullets/

demo gif

安装

npm:

npm install --save rc-bullets

yarn:

yarn add rc-bullets

初始化一个简单的弹幕场景

import React, { useEffect, useState } from 'react';
import BulletScreen, { StyledBullet } from 'rc-bullets';

const headUrl='https://zerosoul.github.io/rc-bullets/assets/img/heads/girl.jpg';
export default function Demo() {
  // 弹幕屏幕
  const [screen, setScreen] = useState(null);
  // 弹幕内容
  const [bullet, setBullet] = useState('');
  useEffect(() => {
    // 给页面中某个元素初始化弹幕屏幕,一般为一个大区块。此处的配置项全局生效
    let s = new BulletScreen('.screen',{duration:20});
    // or
    // let s=new BulletScreen(document.querySelector('.screen));
    setScreen(s);
  }, []);
  // 弹幕内容输入事件处理
  const handleChange = ({ target: { value } }) => {
    setBullet(value);
  };
  // 发送弹幕
  const handleSend = () => {
    if (bullet) {
      // push 纯文本
      screen.push(bullet);
      // or 使用 StyledBullet

      screen.push(
        <StyledBullet
          head={headUrl}
          msg={bullet}
          backgroundColor={'#fff'}
          size='large'
        />
      );
      // or 还可以这样使用,效果等同使用 StyledBullet 组件
      screen.push({msg:bullet,head:headUrl,color:"#eee" size="large" backgroundColor:"rgba(2,2,2,.3)"})
    }
  };
  return (
    <main>
      <div className="screen" style={{ width: '100vw', height: '80vh' }}></div>
      <input value={bullet} onChange={handleChange} />
      <button onClick={handleSend}>发送</button>
    </main>
  );
}

特性

  • 支持传入 React 组件,灵活控制弹幕内容和 UI,并提供一个默认样式组件:<StyledBullet/>
  • 弹幕屏幕管理:清屏,暂停,隐藏(后续可能会加入针对单个弹幕的控制)
  • 弹幕动画参数化:运动函数(匀速/ease/步进/cubic-bezier)、时长(秒)、循环次数、延迟等
  • 鼠标悬浮弹幕暂停

常用 API

  • 初始化弹幕屏幕:const screen = new BulletScreen(<queryString>|<HTMLElement>,[<option>]),此处的option和下面的一致,偏向全局初始化,没有则使用默认值,每次发送弹幕不传则使用默认或全局设置,传了则该条弹幕覆盖全局设置。
  • 发送弹幕:const bulletId = screen.push(<string>|<ReactElement>,[<option>])

option

| 选项 | 含义 | 值类型 | 默认值 | 备注 | | -------------- | ------------------ | ------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------- | | top | 弹幕位置 | string | undefined | 自已强制定制距离顶部的高度,格式同 CSS 中的 top | | trackHeight | 轨道高度 | number | 50 | 均分轨道的高度 | | onStart | 自定义动画开始函数 | function | null | e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效,在特定时间暂停该弹幕:screen.pause(bulletId) | | onEnd | 自定义动画结束函数 | function | null | e.g.(bulletId,screen)=>{//do something}可以自定义一些动作,比如播放某个音效 | | pauseOnClick | 鼠标点击暂停 | boolean | false | 再次点击继续 | | pauseOnHover | 鼠标悬停暂停 | boolean | true | 鼠标进入暂停,离开继续 | | loopCount | 循环次数 | number/string | 1 | 值为‘infinite’时,表示无限循环 | | duration | 滚动时长 | number/string | 10 | 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位 | | delay | 延迟 | number/string | 0 | 数字则单位为‘秒’,字符串则支持'10s'和'300ms'两种单位 | animation-delay支持的所有值 | | direction | 动画方向 | string | normal | animation-direction支持的所有值 | | animateTimeFun | 动画函数 | string | linear:匀速 | animation-timing-function支持的所有值 |

  • 弹幕清屏:screen.clear([<bulletId>]),无参则清除全部
  • 暂停弹幕:screen.pause([<bulletId>]),无参则暂停全部
  • 弹幕继续:screen.resume([<bulletId>]),无参则继续全部
  • 隐藏弹幕(滚动继续):screen.hide([<bulletId>]),无参则隐藏全部
  • 显示弹幕:screen.show([<bulletId>]),无参则显示全部
  • 自带的一个弹幕样式组件:<StyledBullet msg="<弹幕内容>" head="<头像地址>" color="<字体颜色>" backgroundColor="<背景色>" size="<尺寸:small|normal|large|huge|自定义大小,基于em机制,默认normal>">

TO DO

  • ~~弹幕过多时,防重叠处理~~
  • react hooks 版本:useBulletScreen

自己动手,丰衣足食

克隆项目

git clone https://github.com/zerosoul/rc-bullets.git && cd rc-bullets

本地类库构建

npm i && npm run start

本地 demo

cd example && npm i && npm run start

支持

赞赏码

License

MIT © zerosoul