React Ticker

A simple and customizable react ticker (news scroller) component.

Installation

Install with npm

  npm install @guna81/react-ticker

Demo

Checkout the Demo.

Usage/Examples

export default function App() {
  const data = [
    {
      id: 1,
      value:
        "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
    },
    // more data ...
  ];

  const renderItem = (item) => {
    return (
      <p style={{ whiteSpace: "nowrap", color: "orange" }} >
        {item.value}
      </p>
    );
  };

  return (
    <div className="App">

      {/* using default ticker item component */}
      <ReactTicker
        data={data.map((item) => item.value)}
        speed={20}
        keyName="_id"
        tickerStyle={{
          position: "fixed",
          top: 0,
          left: "0",
          width: "100%",
          height: "40px",
          backgroundColor: "#fff",
          zIndex: 99,
          borderTop: "1px solid #e0e0e0"
        }}
        tickerClassName="news-ticker"
      />
      
      {/* using custom ticker item component */}
      <ReactTicker
        data={data}
        component={renderItem}
        speed={40}
        keyName="_id"
        tickerStyle={{
          position: "fixed",
          bottom: 0,
          left: "0",
          width: "100%",
          height: "40px",
          backgroundColor: "#fff",
          zIndex: 99,
          borderTop: "1px solid #e0e0e0"
        }}
        tickerClassName="news-ticker"
      />
    </div>
  );
}

API Reference

Props

| Parameter | Type | Description | Default Value | | :-------- | :------- | :---------------------- | :------------------ | | data | array | Required. List of objects or strings. | empty array | | component | react node | Custom ticker item component. | null | | keyName | string | Key of object (Required, if only the data is a list of objects.). | null | | speed | number | Scroll speed (0 - 60). | 30 | | delay | number | Scroll delay. | 0 | | diretion | string | Scroll direction. | normal | | tickerClassName | string | Ticker container class name. | empty string | | itemClassName | string | Ticker item class name. | empty string | | tickerTextClassName | string | Ticker text class name (Required, if only the data is a list of strings). | empty string | | tickerStyle | object | Ticker container style. | empty object | | itemStyle | object | Ticker item styles. | empty object | | loop | boolean | Infinite scroll. | true |

• Component and keyName props are required if data is a list of objects.
• If data is a list of strings, components, and keyName props are unnecessary.