@caldwell619/react-ticker
A tiny utility to show continually horizontal scrolling text in React web apps
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.
Base 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