@caldwell619/react-ticker

A tiny utility to show continually horizontal scrolling text in React web apps

Demo

Look at the top of the page to see 2 items sliding by.

Install

yarn add @caldwell619/react-ticker

npm install --save @caldwell619/react-ticker

Usage

It's supposed to be easy. Please submit an issue if it's not.

Bare Bones

This example will expand to it's container, and scroll one item across the small box.

import React from 'react'
import { Ticker, TickerItem } from '@caldwell619/react-ticker'
// Must import the styles
import '@caldwell619/react-ticker/dist/index.css'

const itemsToScroll: TickerItem[] = [
  {
    id: '123',
    text: 'Something you wish to scroll indefinitely across the screen',
  },
]

const App = () => <Ticker items={itemsToScroll} />

Props

The TickerProps and TickerItem interfaces are exported for convenience.

TickerProps

These are the props given to the main export.

Name	Type	Required	Purpose
items	TickerItem[]	✅	All of the items that will scroll across the element.
position	top or bottom	❌	If provided, will glue the ticker to either the top or the bottom of the viewport
slideSpeed	CSSProperties['animationDuration']	❌	The duration the entire animation will take. This takes some tweaking, especially with various screen sizes.

TickerItem

Each individual item that will represent a block of text scrolling across the screen

Name	Type	Required	Purpose
text	string	✅	The text that gets scrolled
id	string	❌	If provided, this is used as the key for React

License

ISC © christopher-caldwell