Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmetcanaydemir/react-advanced-news-ticker
A powerful, flexible, lightweight and animated vertical news ticker component for React.
https://github.com/ahmetcanaydemir/react-advanced-news-ticker
news news-ticker newsticker newsticker-plugin react-library roulette ticker
Last synced: 18 days ago
JSON representation
A powerful, flexible, lightweight and animated vertical news ticker component for React.
- Host: GitHub
- URL: https://github.com/ahmetcanaydemir/react-advanced-news-ticker
- Owner: ahmetcanaydemir
- License: gpl-2.0
- Created: 2020-09-26T10:25:17.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-08-23T11:52:12.000Z (about 3 years ago)
- Last Synced: 2024-09-19T04:19:13.408Z (about 2 months ago)
- Topics: news, news-ticker, newsticker, newsticker-plugin, react-library, roulette, ticker
- Language: JavaScript
- Homepage: https://ahmetcan.org/react-advanced-news-ticker
- Size: 1.77 MB
- Stars: 51
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-react-components - react-advanced-news-ticker - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component (UI Components / Miscellaneous)
- awesome-react-components - react-advanced-news-ticker - [demo](https://www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component (UI Components / Miscellaneous)
- fucking-awesome-react-components - react-advanced-news-ticker - 🌎 [demo](www.ahmetcanaydemir.com/react-advanced-news-ticker/) - A flexible and animated vertical news ticker component (UI Components / Miscellaneous)
README
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.
### 🏠 [Demo](https://ahmetcanaydemir.github.io/react-advanced-news-ticker)
## ⚡️ 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
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 {
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 <>
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.
{ newsTickerRef.current.start() }}>
Start
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](https://twitter.com/ahmetcnaydemir)
- Github: [@ahmetcanaydemir](https://github.com/ahmetcanaydemir)
- LinkedIn: [@ahmetcanaydemir](https://linkedin.com/in/ahmetcanaydemir)
## 👍 Contribute
Contributions, issues and feature requests are welcome!
Feel free to check [issues page](https://github.com/ahmetcanaydemir/react-advanced-news-ticker/issues).
## 📝 License
This project based on [risq](https://github.com/risq)'s [JQuery Advanced News Ticker](https://github.com/risq/jquery-advanced-news-ticker).
This project is [GPL-2.0](https://github.com/ahmetcanaydemir/react-advanced-news-ticker/blob/master/LICENSE) licensed.