@guna81/react-ticker v3.4.1

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

• 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.