Home

Awesome

<h1 align="center">React Advanced News Ticker</h1>

alt text

<p> <a href="https://www.npmjs.com/package/react-advanced-news-ticker" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/react-advanced-news-ticker.svg"> </a> <a href="https://ahmetcanaydemir.github.io/react-advanced-news-ticker" target="_blank"> <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" /> </a> <a href="https://github.com/ahmetcanaydemir/react-advanced-news-ticker/graphs/commit-activity" target="_blank"> <img alt="Maintenance" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" /> </a> <a href="https://github.com/ahmetcanaydemir/react-advanced-news-ticker/blob/master/LICENSE" target="_blank"> <img alt="License: GPL--2.0" src="https://img.shields.io/github/license/ahmetcanaydemir/react-advanced-news-ticker" /> </a> <a href="https://twitter.com/ahmetcnaydemir" target="_blank"> <img alt="Twitter: ahmetcnaydemir" src="https://img.shields.io/twitter/follow/ahmetcnaydemir.svg?style=social" /> </a> </p>

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

PropUsageType/ValuesDefault value
rowHeightdefines the height (in px) of one rowint22
maxRowsdefines the number of rows displayed at the same timeint3
speeddefines the animation speed (in ms)of the rows moving up or downint (in ms)400
durationdefines the times (in ms) before the rows automatically moveint (in ms)2500
directiondefines the direction of the rows movementDirections.UP or Directions.DOWNDirections.UP
autoStartenable/disable auto start on loadbooltrue
pauseOnHoverenable/disable pause when mouse hovers the newsTicker elementbooltrue
classNamefor define className of newsTicker's ul elementbooltrue
idfor define id of newsTicker's ul elementbool""
stylefor styling newsTicker's ul elementobject{}
hasMovedcallback called at the end of every movement animationfunction
movingUpcallback called before launching moving up actionfunction
movingDowncallback called before launching moving down actionfunction
startcallback called on start actionfunction
stopcallback called on stop actionfunction
pausecallback called on pause action (triggered on onMouseEnter if pauseOnHover=true )function
unpausecalled 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

MethodAction
startstarts moving newsTicker elements
stopstops moving newsTicker elements
getStatereturns current state: TickerStates.Stopped = stopped, TickerStates.Running = started, TickerStates.Paused = paused (and started)
pausepauses 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)
unpauseunpauses 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)
moveDownmoves elements down
moveUpmoves elements up
moveNextmoves up or down according to the current direction option
movePrevmoves up or down according to the current direction option
moveequivalent to moveNext, but will not move if paused

Author

👤 Ahmet Can Aydemir

👍 Contribute

Contributions, issues and feature requests are welcome!<br />Feel free to check issues page.

📝 License

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