react-smart-ticker v1.4.0

React Smart Ticker is a React component that 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 component 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

Controlling the Play, Pause snd Reset States

The components provide methods for developers to control the ticker’s play, pause and resets state programmatically. These methods are accessible via forwardedRef and allow you to start, stop and reset the ticker based on your app’s requirements.

Exposed Methods

To enable control over play and pause, react-smart-ticker uses forwardRef. The component exposes the following methods:

• play(): Starts the ticker animation.
• pause(): Pauses the ticker animation.
• reset(isPaused: boolean): Resets the ticker animation. isPaused flag sets the state of the animation after resetting.

Usage

To use these methods, you need to: 1. Create a reference using useRef. 2. Attach the ref to the SmartTicker component. 3. Call the play and pause methods directly from the ref.

Example

Here’s an example of setting up and using play and pause with react-smart-ticker:

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

function App() {
  // Create a ref to access SmartTicker methods
  const tickerRef = useRef<{
    play: () => void
    pause: () => void
    reset: (isPaused: boolean) => void
  }>(null)

  // Define handlers to control the ticker
  const handlePlay = () => {
    tickerRef.current?.play()
  }

  const handlePause = () => {
    tickerRef.current?.pause()
  }

  const handleReset = (isPaused: boolean = true) => {
    tickerRef.current?.reset(isPaused)
  }

  return (
    <div>
      <SmartTicker forwardedRef={tickerRef}>
        <p>Your ticker content goes here</p>
      </SmartTicker>

      <button onClick={() => { handlePlay() }}>Play</button>
      <button onClick={() => { handlePause() }}>Pause</button>
      <button onClick={() => { handleReset(true) }}>Reset (w/pause)</button>
    </div>
  )
}

export default App;

Licence

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