react-barrage

一个基于react的弹幕组件

安装

$ yarn add react-barrage

使用

import Barrage from 'react-barrage'

function Item ({text, xId}) {
    return <div style={{color: 'red'}}>{text}</div>
}

function _getData () {
    let ret = []
    for (let i = 0; i < 20; i++) {
        ret.push({
            xId: i,
            text: i + '_alalal_' + i
        })
    }

    return Promise.resolve(ret)
}

let barrage = (
    <Barrage 
        getData={_getData}
        style={{height: 400, overflow: 'hidden'}}
        Item={Item}
        margin={50}
        itemKey="xId"
        ></Barrage>
)

必要属性

Barrage.propTypes = {
    // 渲染子弹的一个React组件，接受所有子弹数据作为属性
    Item: PropTypes.func.isRequired,

    // 子弹列表数据的获取方法，需要返回一个Promise
    getData: PropTypes.func.isRequired,

    // 子弹数据中唯一标识的字段名
    itemKey: PropTypes.string.isRequired
}

可选属性

static defaultProps = {
        // 弹道的间隔
        margin: 20,

        // 子弹的最快速度
        maxSpeed: 200,

        // 子弹的最小速度
        minSpeed: 100,

        className: '',
        style: {}
    }