React Advanced News Ticker

!alt text

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

$3

⚡️ Quickstart

``JSX

Etiam imperdiet volutpat libero eu tristique.

Curabitur porttitor ante eget hendrerit adipiscing.

Praesent ornare nisl lorem, ut condimentum lectus gravida ut.

Nunc ultrices tortor eu massa placerat posuere.

`

⚙️ Installation

`sh
npm i react-advanced-news-ticker
`

👀 Examples

#### 📖 With Custom Props

`JSX
rowHeight = {48}
maxRows = {2}
speed = {600}
direction = {Directions.UP}
duration = {4000}
autoStart = {true}
pauseOnHover = {false}
id = "myId"
className = "myClassName1 myClassName2"
style = {{marginTop: 34}}>

Etiam imperdiet volutpat libero eu tristique.

Curabitur porttitor ante eget hendrerit adipiscing.

Praesent ornare nisl lorem, ut condimentum lectus gravida ut.

Nunc ultrices tortor eu massa placerat posuere.

`

#### 📖 With Callbacks

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

return 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.');
}}>

Etiam imperdiet volutpat libero eu tristique.

Curabitur porttitor ante eget hendrerit adipiscing.

Praesent ornare nisl lorem, ut condimentum lectus gravida ut.

Nunc ultrices tortor eu massa placerat posuere.

`

#### 📖 With Methods

`JSX
const newsTickerRef = useRef(null);
return <>
ref = {newsTickerRef}
autoStart = {false}
speed = {400}>

Etiam imperdiet volutpat libero eu tristique.

Curabitur porttitor ante eget hendrerit adipiscing.

Praesent ornare nisl lorem, ut condimentum lectus gravida ut.

Nunc ultrices tortor eu massa placerat posuere.

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

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

`

📇 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 :

`javascript
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.