Controls

Supported 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

Example

Typescript

App.tsx

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

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

  const handleStart = () => {
    ref.current?.start();
  };
  const handleStop = () => {
    ref.current?.stop();
  };
  const handlePause = () => {
    ref.current?.pause();
  };
  const handleDestroy = () => {
    ref.current?.dispose();
  };
  return (
    <ScrollingText ref={ref}>
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

Javascript

App.jsx

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

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

  const handleStart = () => {
    ref.current.start();
  };
  const handleStop = () => {
    ref.current.stop();
  };
  const handlePause = () => {
    ref.current.pause();
  };
  const handleDestroy = () => {
    ref.current.dispose();
  };
  return (
    <ScrollingText ref={ref}>
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;