Control Methods

Control your ScrollingText component programmatically using refs and the available instance methods.

Available Methods

Method	Description
start()	▶️ Start the animation
pause()	⏸️ Pause the animation
stop()	⏹️ Stop and reset to first text
dispose()	🗑️ Clean up and remove all elements

Using Refs

Access the instance methods by passing a ref to the ScrollingText component:

TypeScript

App.tsx

import React from "react";
import ScrollingText from "web-scrolling-text/react";
import { ScrollingType } from "web-scrolling-text";

function App() {
  const scrollerRef = React.useRef<ScrollingType>(null);

  const handleStart = () => {
    scrollerRef.current?.start();
  };

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

  const handleStop = () => {
    scrollerRef.current?.stop();
  };

  const handleDispose = () => {
    scrollerRef.current?.dispose();
  };

  return (
    <div>
      <ScrollingText ref={scrollerRef}>
        <div>Hello</div>
        <div>World</div>
        <div>Control</div>
        <div>Demo</div>
      </ScrollingText>

      <div>
        <button onClick={handleStart}>▶️ Start</button>
        <button onClick={handlePause}>⏸️ Pause</button>
        <button onClick={handleStop}>⏹️ Stop</button>
        <button onClick={handleDispose}>🗑️ Dispose</button>
      </div>
    </div>
  );
}

export default App;

JavaScript

App.jsx

import React from "react";
import ScrollingText from "web-scrolling-text/react";

function App() {
  const scrollerRef = React.useRef();

  const handleStart = () => {
    scrollerRef.current.start();
  };

  const handlePause = () => {
    scrollerRef.current.pause();
  };

  const handleStop = () => {
    scrollerRef.current.stop();
  };

  const handleDispose = () => {
    scrollerRef.current.dispose();
  };

  return (
    <div>
      <ScrollingText ref={scrollerRef}>
        <div>Hello</div>
        <div>World</div>
        <div>Control</div>
        <div>Demo</div>
      </ScrollingText>

      <div>
        <button onClick={handleStart}>▶️ Start</button>
        <button onClick={handlePause}>⏸️ Pause</button>
        <button onClick={handleStop}>⏹️ Stop</button>
        <button onClick={handleDispose}>🗑️ Dispose</button>
      </div>
    </div>
  );
}

export default App;

Method Details

start()

Starts the scrolling animation. If already running, has no effect.

scrollerRef.current?.start();

tip

The component starts automatically when mounted. You only need to call start() after using pause() or stop().

pause()

Pauses the animation at the current text. Call start() to resume.

scrollerRef.current?.pause();

stop()

Stops the animation and resets to the first text.

scrollerRef.current?.stop();

dispose()

Completely cleans up the instance and removes all DOM elements.

scrollerRef.current?.dispose();

warning

After calling dispose(), the component cannot be reused. The component will need to be remounted.

Practical Examples

Pause on Hover

import React, { useRef } from "react";
import ScrollingText from "web-scrolling-text/react";
import { ScrollingType } from "web-scrolling-text";

function App() {
  const scrollerRef = useRef<ScrollingType>(null);

  return (
    <div
      onMouseEnter={() => scrollerRef.current?.pause()}
      onMouseLeave={() => scrollerRef.current?.start()}
    >
      <ScrollingText ref={scrollerRef}>
        <div>Hover</div>
        <div>to</div>
        <div>Pause</div>
      </ScrollingText>
    </div>
  );
}

Conditional Control

import React, { useRef, useState } from "react";
import ScrollingText from "web-scrolling-text/react";
import { ScrollingType } from "web-scrolling-text";

function App() {
  const scrollerRef = useRef<ScrollingType>(null);
  const [isPlaying, setIsPlaying] = useState(true);

  const togglePlay = () => {
    if (isPlaying) {
      scrollerRef.current?.pause();
    } else {
      scrollerRef.current?.start();
    }
    setIsPlaying(!isPlaying);
  };

  return (
    <div>
      <ScrollingText ref={scrollerRef}>
        <div>Toggle</div>
        <div>Play</div>
        <div>Pause</div>
      </ScrollingText>

      <button onClick={togglePlay}>
        {isPlaying ? '⏸️ Pause' : '▶️ Play'}
      </button>
    </div>
  );
}

Cleanup on Unmount

import React, { useRef, useEffect } from "react";
import ScrollingText from "web-scrolling-text/react";
import { ScrollingType } from "web-scrolling-text";

function App() {
  const scrollerRef = useRef<ScrollingType>(null);

  useEffect(() => {
    return () => {
      // Cleanup when component unmounts
      scrollerRef.current?.dispose();
    };
  }, []);

  return (
    <ScrollingText ref={scrollerRef}>
      <div>Auto</div>
      <div>Cleanup</div>
    </ScrollingText>
  );
}

Multiple Instances

import React, { useRef } from "react";
import ScrollingText from "web-scrolling-text/react";
import { ScrollingType } from "web-scrolling-text";

function App() {
  const ref1 = useRef<ScrollingType>(null);
  const ref2 = useRef<ScrollingType>(null);

  const startAll = () => {
    ref1.current?.start();
    ref2.current?.start();
  };

  const stopAll = () => {
    ref1.current?.stop();
    ref2.current?.stop();
  };

  return (
    <div>
      <ScrollingText ref={ref1}>
        <div>First</div>
        <div>Instance</div>
      </ScrollingText>

      <ScrollingText ref={ref2}>
        <div>Second</div>
        <div>Instance</div>
      </ScrollingText>

      <button onClick={startAll}>Start All</button>
      <button onClick={stopAll}>Stop All</button>
    </div>
  );
}

Type Reference

When using TypeScript, import the ScrollingType for proper typing:

import { ScrollingType } from "web-scrolling-text";

const ref = React.useRef<ScrollingType>(null);

:::tip Interactive Demo Try the React Controls demo to see these methods in action! :::