ahmetcanaydemir / react-advanced-news-ticker

A powerful, flexible, lightweight and animated vertical news ticker component 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.

🏠 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

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

react-advanced-news-ticker's Issues

ReferenceError: regeneratorRuntime is not defined

Getting the following error :

ReferenceError: regeneratorRuntime is not defined
at D:\src\myproject\node_modules\react-advanced-news-ticker\dist\index.js:153:50
at D:\src\myproject\node_modules\react-advanced-news-ticker\dist\index.js:213:6
at Object. (D:\src\myproject\node_modules\react-advanced-news-ticker\dist\index.js:442:2)
at Module._compile (internal/modules/cjs/loader.js:1085:14)
at Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
at Object.require.extensions. [as .js] (D:\src\myproject\node_modules\ts-node\src\index.ts:851:44)
at Module.load (internal/modules/cjs/loader.js:950:32)
at Function.Module._load (internal/modules/cjs/loader.js:790:14)
at Module.require (internal/modules/cjs/loader.js:974:19)
at require (internal/modules/cjs/helpers.js:92:18)
wait - compiling...
event - compiled successfully

Found this related SO question : https://stackoverflow.com/questions/53558916/babel-7-referenceerror-regeneratorruntime-is-not-defined

I tried the following but it had no effect :

npm install --save core-js
npm install --save regenerator-runtime

Appreciate any suggestions.

Dynamically Adding Items

I have enjoyed using this library in a couple of projects and think that it's great! Recently I have come across an issue though.
This time around, my use case involves adding items to the news ticker dynamically but I am unsure how to get this to work.

Here is what I have tried (Sandbox link)

import React, { useEffect, useState } from "react";
import NewsTicker from "react-advanced-news-ticker";

export default function App() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    setTimeout(() => {
      // simulate API request
      setItems(["Item 1", "Item 2", "Item 3"]);
    }, 3000);
  }, []);

  return (
    <NewsTicker maxRows={1}>
      <div>Hello</div>
      <div>Goodbye</div>
      {items.map((i) => (
        <div key={i}>{i}</div>
      ))}
    </NewsTicker>
  );
}

In this example, only the "Hello" and "Goodbye" strings are displayed in the ticker. If I add only the dynamic portions and remove the hard coded "Hello" and "Goodbye" divs, the page refuses to load with an error from the library.

Is there a way I can dynamically add/remove data from the items in the ticker? I have looked through the documentation and cannot find a way of doing it. Apologies if it is something I have overlooked and indeed is documented somewhere.

Thanks.

Could not find a declaration file for module

Could not find a declaration file for module 'react-advanced-news-ticker'. 'D:/Projects/nextjs/wp/node_modules/react-advanced-news-ticker/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-advanced-news-ticker if it exists or add a new declaration (.d.ts) file containing declare module 'react-advanced-news-ticker';ts(7016)

Can not pass content into NewsTicker

Hello ahemetcanaydemir,

I very like this project. I am new to react. But when I want to pass content in to NewTicker it did show anything.

import React, { useRef, useState, useEffect } from "react";
import NewsTicker, { Directions } from "../react-advanced-news-ticker/index";
import "./HomeTickers.css";
function HomeTickers() {
const ref1 = useRef(null);
const ref2 = useRef(null);
const [newsData, setNewsData] = useState({});

useEffect(() => {
getNewsWithFetch();
}, []);
const getNewsWithFetch = async () => {
const response = await fetch("http://127.0.0.1:8000/news/article_list/");
const jsonData = await response.json();
setNewsData(jsonData[0]);
};

return (

<div>{newsData.content}</div>

);
}

Thank you

index.js:271 Uncaught (in promise) TypeError: Cannot read property 'children' of null at NewsTicker._callee5$

Thanks for creating this awesome library! I came across an issue though. As soon as I changed the URL to render a different Page component i came across this error:

Uncaught (in promise) TypeError: Cannot read property 'children' of null
    at NewsTicker._callee5$ (index.js:271)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at step (index.js:22)
    at index.js:22
    at new Promise (<anonymous>)
    at NewsTicker.<anonymous> (index.js:22)
    at NewsTicker._handleUpAnimation (index.js:317)
    at NewsTicker._callee6$ (index.js:350)
    at tryCatch (runtime.js:63)
    at Generator.invoke [as _invoke] (runtime.js:293)
    at Generator.next (runtime.js:118)
    at step (index.js:22)
    at index.js:22

Seems to me like somehow the .next function is still being called although I am rendering a completely different component. What do you think? Thank you!