A powerful, flexible and animated vertical news ticker plugin for React

React Advanced News Ticker

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.

⚡️ 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