cacivy / react-textscroll

A text-scroll Component for 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实现

react-textscroll's Issues

垂直滚动是有问题的

yarn add 时报错了

作者你好，我在项目中 yarn add 时报错了，请问是怎么回事呢？

请问下. 这个组件是否能支持 ssr?

我在 next.js 项目中引入 此项目， 会报错.

所以想确认下 在其他ssr 项目中 是否能使用? 看了下报错信息. 貌似是 styled 未配置 服务端的功能

我也在使用 styled 在服务端中使用它，配置有点麻烦.

有什么好的建议吗？

目前的替代方案是 ： animate.css 有点丑陋