A powerful, flexible and animated vertical news ticker plugin for React. React Advanced News Ticker provides multiple callbacks and methods to allow a maximum flexibility and an easy implementation into any project.

🏠 Demo

⚡️ Quickstart

<NewsTicker>
  <div>Etiam imperdiet volutpat libero eu tristique.</div>
  <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
  <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
  <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

⚙️ Installation

npm i react-advanced-news-ticker

👀 Examples

📖 With Custom Props

<NewsTicker
    rowHeight = {48}
    maxRows = {2}
    speed = {600}
    direction = {Directions.UP}
    duration = {4000}
    autoStart = {true}
    pauseOnHover = {false}
    id = "myId"
    className = "myClassName1 myClassName2"
    style = {{marginTop: 34}}>
    <div>Etiam imperdiet volutpat libero eu tristique.</div>
    <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
    <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
    <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

📖 With Callbacks

const updateInfos = () => {
  ...
}

return <NewsTicker
    maxRows = {1}
    duration = {6000}
    hasMoved = {updateInfos}
    started = {()=>{
      console.log('react advanced news ticker just started!');
    }}
    paused = {()=>{
      console.log('react advanced news ticker has been paused.');
    }}>
    <div>Etiam imperdiet volutpat libero eu tristique.</div>
    <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
    <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
    <div>Nunc ultrices tortor eu massa placerat posuere.</div>
</NewsTicker>

📖 With Methods

const newsTickerRef = useRef(null);
return <>
  <NewsTicker
      ref = {newsTickerRef}
      autoStart = {false}
      speed = {400}>
      <div>Etiam imperdiet volutpat libero eu tristique.</div>
      <div>Curabitur porttitor ante eget hendrerit adipiscing.</div>
      <div>Praesent ornare nisl lorem, ut condimentum lectus gravida ut.</div>
      <div>Nunc ultrices tortor eu massa placerat posuere.</div>
  </NewsTicker>

  <button
    onClick={() => { newsTickerRef.current.start() }}>
    Start
  </button>

  <div
    onMouseEnter={() => newsTickerRef.current.pause()}
    onMouseLeave={() => newsTickerRef.current.unPause()}>
     Pause
  </div>
</>

📇 Props

| Prop | Usage | Type/Values | Default value | | -------------- | ----------------------------------------------------------------------------------------- | ------------------------------------ | ---------------- | | rowHeight | defines the height (in px) of one row | int | 22 | | maxRows | defines the number of rows displayed at the same time | int | 3 | | speed | defines the animation speed (in ms)of the rows moving up or down | int (in ms) | 400 | | duration | defines the times (in ms) before the rows automatically move | int (in ms) | 2500 | | direction | defines the direction of the rows movement | Directions.UP or Directions.DOWN | Directions.UP | | autoStart | enable/disable auto start on load | bool | true | | pauseOnHover | enable/disable pause when mouse hovers the newsTicker element | bool | true | | className | for define className of newsTicker's ul element | bool | true | | id | for define id of newsTicker's ul element | bool | "" | | style | for styling newsTicker's ul element | object | {} | | hasMoved | callback called at the end of every movement animation | function | | movingUp | callback called before launching moving up action | function | | movingDown | callback called before launching moving down action | function | | start | callback called on start action | function | | stop | callback called on stop action | function | | pause | callback called on pause action (triggered on onMouseEnter if pauseOnHover=true ) | function | | unpause | called on unpause action (triggered on onMouseLeave if pauseOnHover=true ) | function |

📇 Methods

After creating NewsTicker component with ref, methods are called with ref.current.methodName()

Example :

ref.current.stop();
ref.current.start();
ref.current.move();
ref.current.getState();
ref.current.pause();

📜 Method List

| Method | Action | | ---------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | start | starts moving newsTicker elements | | stop | stops moving newsTicker elements | | getState | returns current state: TickerStates.Stopped = stopped, TickerStates.Running = started, TickerStates.Paused = paused (and started) | | pause | pauses newsTicker elements without stopping them - the newsTicker has to be started to be able to pause it (the pause method is called on onMouseEnter if pauseOnHover = true) | | unpause | unpauses newsTicker elements - the newsTicker has to be started & paused to be able to unpause it (the unpause method is called on onMouseLeave if pauseOnHover = true) | | moveDown | moves elements down | | moveUp | moves elements up | | moveNext | moves up or down according to the current direction option | | movePrev | moves up or down according to the current direction option | | move | equivalent to moveNext, but will not move if paused |

Author

👤 Ahmet Can Aydemir

• Website: https://www.ahmetcanaydemir.com
• Twitter: @ahmetcnaydemir
• Github: @ahmetcanaydemir
• LinkedIn: @ahmetcanaydemir

👍 Contribute

Contributions, issues and feature requests are welcome!Feel free to check issues page.

📝 License

This project based on risq's JQuery Advanced News Ticker. This project is GPL-2.0 licensed.