Popularity
0.6
Growing
Activity
4.2
Declining
7
1
1

Programming language: JavaScript
License: GNU General Public License v3.0 only
Tags: UI Components     Miscellaneous    

react-advanced-news-ticker alternatives and similar libraries

Based on the "Miscellaneous" category.
Alternatively, view react-advanced-news-ticker alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of react-advanced-news-ticker or a related project?

Add another 'Miscellaneous' Library

README

React Advanced News Ticker

[alt text](public/gif.gif "React Advanced News Ticker Gif")

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

๐Ÿ‘ 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.


*Note that all licence references and agreements mentioned in the react-advanced-news-ticker README section above are relevant to that project's source code only.