React Smart Ticker

Automatically displays text as a scrolling ticker/marquee when it overflows the container.

Demo

https://eugen-k.github.io/react-smart-ticker-demo/

Features

• Multiline support
• Can be used as a ticker/marquee for any element e.g. text, images, HTML blocks
• Optionally draggable
• Supports RTL
• Highly customizable
• Zero dependency

SmartTicker and SmartTickerDraggable component differences

SmartTicker

• uses CSS based animation
• can be played or paused by click

SmartTickerDraggable

• uses requestAnimationFrame() based animation
• draggable
• has backward animation
• can have a delay before animating back to the start position

[!IMPORTANT] For complex elements (e.g. images) is recommended to use SmartTicker as browsers are performing better using CSS-based animation.

Installation

NPM

npm install react-smart-ticker --save

Yarn

yarn add react-smart-ticker

Usage

Import SmartTicker or SmartTickerDraggable to a file depending on intended use:

import { SmartTicker } from 'react-smart-ticker'

import { SmartTickerDraggable } from 'react-smart-ticker'

Or import them both:

import { SmartTicker, SmartTickerDraggable } from 'react-smart-ticker'

Then in your .jsx or .tsx file use it as a simple React component:

import { SmartTicker, SmartTickerDraggable } from 'react-smart-ticker'

const App = () => (
  <>
    <SmartTicker>Some text</SmartTicker>
    <SmartTickerDraggable>Some draggable text</SmartTickerDraggable>
  </>
)

export default App

Props

| Prop Name | Type | Required | Default | Description | | -------------------- | ---------------------------------------------- | -------- | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | | smart | boolean | No | true | Smart mode that determines if that's enough space to fit the content of the ticker, and if it's enough the animation will be turned off until the contents change | | isText | boolean | No | true | Determines if the content contains only text which allows showing ellipses when text content isn't fitted into the container | | multiLine | number | No | 0 | Determines the maximum amount of lines within a text content. Sets direction to "top" | | waitForFonts | boolean | No | true | Run the calculation only when fonts are loaded | | speed | number | No | 60 | Scrolling speed in pixels per second | | delay | number | No | 0 | Delay before starting the animation (in milliseconds) | | ⚠️ delayBack | number | No | 0 | Delay before returning to a start position (in milliseconds). Requires infiniteScrollView prop to be false ⚠️ SmartTickerDraggable prop only | | iterations | number | "infinite" | No | "infinite" | Amount of animation iterations second | | infiniteScrollView | boolean | No | true | Determines if the content will repeated one by one during scrolling animation | | autoFill | boolean | No | false | Flag to determine if ticker content should be copied and fill in all the container's space | | direction | "left" | "right" | "top" | "bottom" | No | "left" | The direction in which the ticker will be moving | | rtl | boolean | No | false | Aligns text content to the right. The default direction of animation will be switched to 'right' | | pauseOnHover | boolean | No | false | Pause animation on hover | | playOnHover | boolean | No | false | Play animation on hover | | ⚠️ pauseOnClick | boolean | No | false | Pause animation on click ⚠️ SmartTicker prop only | | ⚠️ playOnClick | boolean | No | false | Play animation on click ⚠️ SmartTicker prop only | | recalcDeps | [] | No | [] | Array of dependencies that trigger recalculation of the component | | disableSelect | boolean | No | false | Controls the possibility of a user to select text in a ticker | | style | CSSProperties | No | null | Ticker component custom CSS styles | | containerStyle | CSSProperties | No | null | Ticker container component custom CSS styles |

License

This project is licensed under the MIT License - see the LICENSE file for details.