ahmetcanaydemir / react-advanced-news-ticker Goto Github PK

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)

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.

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!

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

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.