Simple Example

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

function App() {
  return (
    <ScrollingText>
        {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

Next JS Example

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

function App() {
  return (
    <ScrollingText>
        {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

Advance Example

1. Config

App.tsx

import React from "react";
import ScrollingText from "web-scrolling-text/react";
import style from "./App.module.css";

function App() {
  return (
    <ScrollingText
      options={{
          animationDuration: 1000,
          interval: 3000,
          enterAnimation: style.fadeIn,
          exitAnimation: style.fadeOut,
          loop:false,
      }}
    >
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

App.module.css

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

2. Events

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

function App() {
  return (
    <ScrollingText
      options={{
        onStart: () => console.log("Scrolling started"),
        onChange: (index) => console.log("Changed to:", index),
        onStop: () => console.log("Scrolling stopped"),
        onReachEnd: () => console.log("Reached end"),
      }}
    >
      {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

3. Global Configation

App.tsx

import React from "react";
import ScrollingText, { ScrollingTextProvider } from "web-scrolling-text/react";
import "./global.css";

function App() {
  return (
    <ScrollingTextProvider
      options={{
        interval: 3000,
        animationDuration: 1000,
        loop: true,
        enterAnimation: "fadeIn",
        exitAnimation: "fadeOut",
      }}
    >
      <ScrollingText>{["Hello", "World", "How", "Are", "You"]}</ScrollingText>
    </ScrollingTextProvider>
  );
}

export default App;

global.css

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

4. Control

Start, Stop, Pause, Dispose methods are avaliable to Control the animation

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;

5. Plugin

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

function App() {
  return (
    <ScrollingText plugins={[fadeAnimation]}>
        {["Hello", "World", "How", "Are", "You"]}
    </ScrollingText>
  );
}

export default App;

Note:

You can create any animation with keyframes and pass that value to enterAnimation and exitAnimation
By default loop is true
You can use multiple plugins by importing them from modules