Miss any of our Open RFC calls?Watch the recordings here! »

react-bullet-screen

0.1.1 • Public • Published

React-Bullet-Screen

🚀一个轻量的可自定义的React无限循环弹幕组件. live demo

Installation

npm install react-bullet-screen --save

Usage

import React, { useState } from 'react'
import Bullet from 'react-bullet-screen'
 
const text = [
  '我是第一条弹幕',
  '我是第二条弹幕啊',
  '我是第三条弹幕啊啊',
  '我是第四条弹幕啊啊啊',
  '我是第五条弹幕啊啊啊啊',
]
 
const App = () => {
  const [data] = useState(text)
 
  const renderBulletItem = (item) => {
    return <div className="item">{item}</div>
  }
 
  return data.length ? (
    <Bullet
      data={data}
      renderItem={renderBulletItem}
      speed={50}
      row={3}
      rowHeight={40}
      spacing={120}
    />
  ) : null
}

API

Prop Description Type Default 必须
data 弹幕数据 Array [] true
renderItem 渲染每条弹幕 (item: T) => React.ReactElement () => undefined true
speed 弹幕运动速度(px/s) number 50 false
rowHeight 轨道高度(px) number 200 false
spacing 弹幕水平间隔(px) string 120 false

License

MIT

Install

npm i react-bullet-screen

DownloadsWeekly Downloads

3

Version

0.1.1

License

MIT

Unpacked Size

26.9 kB

Total Files

16

Last publish

Collaborators

  • avatar