react-textscroll

基于React的文字滚动组件，具有多种展示模式以及参数定制，适用于消息广播、大屏展示等场景

Dev

yarn install

yarn test 

yarn start

ONLINE DISPLAY

TextScroll

HOW TO USE IT

垂直滚动

import React from 'react'
import TextScroll from 'react-textscroll'

class Content extends React.Component {
	render() {
    	const text = ['1. 第一条消息', '2. 第二条消息', '3. 第三条消息']
    	return (
        	<div>
            	<TextScroll 
                    mode='vertical'
                    text={text} 
                    speed={1000} 
                />
            </div>
        )
    }
}

水平滚动

import React from 'react'
import TextScroll from 'react-textscroll'

class Content extends React.Component {
	render() {
    	const text = ['这是一条很长很长的消息，可以由多条组成。今天天气晴，微风，空气质量好，紫外线强']
    	return (
        	<div>
            	<TextScroll 
                    mode='horizontal'
                    text={text} 
                    speed={1000} 
                />
            </div>
        )
    }
}

API

| 参数 | 说明 | 类型 | 默认值 | | - | - | - | - | | mode | 文字滚动类型，目前支持水平、垂直 | string: horizontal vertical | vertical | | text | 要展示的长文字/文字数组 | string | - | | speed | 滚动速度 | number | 5000(ms) |

More

• 支持typescript类型, 并发布到@types/react-textscroll
• 后续支持JS/CSS两种实现方式，并可自由切换
• text支持传入react组件
• 手动控制暂停、开始，通过static property实现