react-textscroll

text scroll for notice board.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-textscroll
1.0.04 years ago4 years agoMinified + gzip package size for react-textscroll in KB

Readme

TextScroll
Build Status
基于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实现