@caldwell619/react-ticker NPM

@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[]`	:white_check_mark:	All of the items that will scroll across the element.
`position`	`top` or `bottom`	:x:	If provided, will glue the ticker to either the top or the bottom of the viewport
`slideSpeed`	`CSSProperties['animationDuration']`	:x:	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`	:white_check_mark:	The text that gets scrolled
`id`	`string`	:x:	If provided, this is used as the `key` for React

License

@infinitebrahmanuniverse/nolb-_cal @everything-registry/sub-chunk-152 @zalastax/nolb-_cal

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago