andreasfaust/react-ticker

React Ticker is a lightweight, performant React component, that moves text, images and videos infinitely like a newsticker.

react-ticker's Issues

react-ticker not rendering data untill component height is not changed.

react-ticker not rendering data untill component height is not changed.
Kindly check below screenshots.

Before resize component

After resize component

Crash on render

Hello,

I want to use your Component in a project.

But when I want to use it, it tells me that I have reach Maximum update. It happend only when I use your Component and I check render without your library (only 2 render).

Errors :

 Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Uncaught TypeError: can't access property "disconnect", _this.observer is undefined

The above error occurred in the <TickerElement> component:
TickerElement@webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-ticker/dist/index.es.js:287:19
div
Ticker@webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-ticker/dist/index.es.js:494:19
div
div
CurrentSongRender@webpack-internal:///./components/modules/currentSong/CurrentSongRender.tsx:15:17
div
div
div
form
CurrentSongForm@webpack-internal:///./components/modules/currentSong/CurrentSongForm.tsx:95:23
div
CurrentSongEdit@webpack-internal:///./pages/current-song/[id]/index.tsx:60:69
AuthMiddleware@webpack-internal:///./components/layout/Layout.tsx:56:20
div
div
Layout@webpack-internal:///./components/layout/Layout.tsx:70:20
I18nHOC@webpack-internal:///./node_modules/.pnpm/[email protected]/node_modules/rosetty-react/dist/rosetty-react.esm.js:16:18
QueryClientProvider@webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/react-query/es/react/QueryClientProvider.js:39:16
SessionProvider@webpack-internal:///./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next-auth/react/index.js:417:18
App@webpack-internal:///./pages/_app.tsx:95:21
ErrorBoundary@webpack-internal:///./node_modules/.pnpm/[email protected]_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:20638
ReactDevOverlay@webpack-internal:///./node_modules/.pnpm/[email protected]_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/compiled/@next/react-dev-overlay/client.js:8:23177
Container@webpack-internal:///./node_modules/.pnpm/[email protected]_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:323:24
AppContainer@webpack-internal:///./node_modules/.pnpm/[email protected]_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:822:20
Root@webpack-internal:///./node_modules/.pnpm/[email protected]_0204d69bf2f8579eb9ee18cac7cd6c1a/node_modules/next/dist/client/index.js:946:21

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary.
    

Code :

/* eslint-disable @next/next/no-img-element */
/* eslint-disable @next/next/no-page-custom-font */
import { CurrentSongTheme } from '@prisma/client';
import Ticker from 'react-ticker';

export const CurrentSongRender = ({ theme, title, artist, album, image, isPlaying }) => {
  if (theme === CurrentSongTheme.default) {
    return (
      <div className="flex h-full w-full items-center">
        <div className="h-full">
          <img src={image} className="h-full rounded-md shadow-md" alt="album cover" />
        </div>
        <div className="h-[90%] w-full rounded-r-md bg-dark-100 pl-3 text-left">
          <Ticker>
            {({ index }) => (
              <>
                <h1 style={{ paddingRight: '0.5em' }}>This is the Headline of element</h1>
              </>
            )}
          </Ticker>
          {/* <Ticker>
            {({}) => (
              <>
                <p className="font-bold text-white">{title}</p>
              </>
            )}
          </Ticker> */}
        </div>
      </div>
    );
  }

  return <></>;
};

Package.json :

"react": "18.0.0",
"react-dom": "18.0.0",
"react-ticker": "^1.3.2",

Thanks for your help ! ^^

Using Ticker with dynamic data.

Here I have tried to implement react-ticker using dynamic data of some cryptos. But for some reason, it doesn't move. If I give it a fixed width then only it moves but overlaps some values. For that, I have to adjust the width for every new update in API. Is there some way to solve this?

codesandbox : https://codesandbox.io/s/funny-night-kshog
output : https://kshog.csb.app/

how to use this with a static array

Say I have an array that looks like the following {WFC, JNJ, MSFT, FB}. How do I properly get these array elements to render?

Currently if I just put the array in a p tag, each Ticker element looks like:
WFCJNJMSFTFB WFCJNJMSFTFB WFCJNJMSFTFB......

If I do a map on each array element and render each map element in a p tag. It creates an entire new Ticker row. ex:
WFC WFC WFC....
JNJ JNJ JNJ....
MSFT MSFT MSFT MSFT......
FB FB FB FB.......

How do I get it to look like this:
WFC JNJ MSFT FB WFC JNJ MSFT FB WFC JNJ MSFT FB......

Real time ticker possible?

Hi, I'm trying to implement the ticker but with real time data, I'm getting the data correctly and trying to pass it to the component used as children in props.

First time works ok but then children components stop calling componentWillReceiveProps. Here is my code:

Ticker Father component:

<Ticker> {({ index }) => ( <div style={{ display: "flex", flexDirection: "row" }} key={index} > { this.state.data && this.state.data.length > 0 ? this.state.data.map( item => { return <Card key={item.ric + "-key"} name={item.cfname} percentChange={item.pctchng} netChange={item.cfnetchng} last={item.cflast} arrow={item.prctck_1} time={${item.cfdate} ${item.cftime}} prevTick={item.prevTick} /> } ) : `` } </div> )} </Ticker>

Card component

class Card extends React.Component { constructor(props){ super(props) } componentWillReceiveProps(props){ } render(){ return ( ... ); } } export default Card;

Thanks in advance!

How do you use this component ?

I cannot understand from the example. Suppose I want to scroll content inside a <div> and I already have 20 contents that I want to scroll. How do I use it ?

Feature Request: Pause between scrolls

Another feature that would be great is if the scrolling could pause between scrolls.

For example, once the scroll returns to the original starting position, it waits a bit and then starts scrolling again.

This is similar to how long track titles are displayed in Apple Music and Spotify.

React Native Text Ticker does a nice job with this.

Ticker vanishes after a while when leaving tab and coming back

Hi there!
Thank you for this ticker, I really love it.

However, I'm encountering the following problem:
When I have the page open, and just go to another tab and back to the page again after a few seconds, the ticker starts vanishing, almost as if the infinite loop and the ticker ends. So the ticker is gone and only reappears if I refresh the page.
I've tried adding more elements to the Ticker array, but the problem remains the same.
It works just fine when I'm staying on the page.

This is what it looks like, while I'm on the page:

This is what happens after I leave the page (without closing it) and come back after a few seconds:

I've directly added the ticker in my functional component with other elements.

const SliderTextTop = ({
  text, images, buttonText, buttonLink,
}) => (
  <Wrapper>
...
    <TickerWrapper>
      <Ticker>
        {({ index }) => (
          <div>
            <h1>Some Ticker Text</h1>
          </div>
        )}
      </Ticker>
    </TickerWrapper>
   .....
  </Wrapper>
); 

Any idea what the problem could be?
Thank you in advance!

Sticky item when using direction="toRight"

Hey @AndreasFaust

Thanks for putting this neat little library together. Im finding it super useful.

I'm prototyping something and I've created to strips of content using react ticker. One of them animates to the left and one to the right

Here's a Codesandbox: https://codesandbox.io/s/react-ticker-bug-igjc8?file=/src/App.js

Notice how on the second strip, the going using direction="toRight" the first item is stuck, as if it's position fixed.

It only happened when I added enough content though, so Im not really sure what is causing it.

Do you have any ideas?
I wonder if it's a calculation issue with the library or something Im doing wrong?

Many thanks!

Ticker is not reponsive when div resizes.

Hi @AndreasFaust, I am using ticker alongside a drawer. But when the drawer is closed I get this fixed overlapping text.

This is when the drawer is open:

And when the drawer is closed, some text of the ticker is stuck on the right side which is there for as long as the ticker is rendering.

I am not quite sure how to overcome this.

Only loads when page resolution is changes

Something odd is happening , this component only loads when the page is made small from big or made big from small.
Thoughts ? I have tested this on 2 different applications and confirm both times this is the case.

Ticker stops functioning when browser tab isn't active

Hey @AndreasFaust thanks for creating this package.

I'm using it on a 404 page for a site I built: https://www.wagec.org.au/404

It works great:

The only slightly odd behaviour is that the animation / rendering stops when the tab isn't visible on the screen, creating situations like this:

I'm guessing this is for performance reasons? Is there any way to prevent this?

Cant render Ticker

index.es.js:289 Uncaught TypeError: _this.props.children is not a function

this is my code:
<Ticker> {this.props.logos.map((block) => ( <Logo key={block.id}> <img src={block.url} alt={block.alt} /> </Logo> ))} </Ticker>

index parameter is not reset for every iteration

As per the below example code:

const MoveStuffAround = () => (
    <Ticker>
        {({ index }) => (
            <>
                <h1>This is the Headline of element #{index}!</h1>
                <img src="www.my-image-source.com/" alt=""/>
            </>
        )}
    </Ticker>
)

I expected that the index value will be reset based on the number of children elements inside <Ticker>.

However, it seems to be a continuous counter value irrespective of the number of children. Because of this, after the first iteration through all messages, it goes out of bound of messages array - if one keeps messages in an array and use the index.

Either code should be fixed. Otherwise, the documentation needs to be fixed :)

Headline 1 is fixed and headlines stops in 6

react ticker is not working in the simple ticker function from npmjs

the code :

function App() {
return (

{({ index }) => (
<>
This is the Headline of element #{index}!

</>
)}

);
}

results:

Feature Request: Only scroll if content is wider than it's container

This is a nice lib; thanks for sharing.

One feature that would be great is if the scrolling only occurs if the content is wider than it's container.

React Native Text Ticker does a nice job with this.

Has any event to check current display is completed?

Hi, How can I check current display is run and disappear from screen?

React 18 compatibility

I believe that the current version (1.3.2) is not compatible with react 18.1

This is what it shows in the console:
PS directory> npm i react-ticker
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.1.0" from the root project

resizing causes full crash with typeError: Cannot read properties of null (reading 'height')

it takes quite a bit of resizing to get this to crash but eventually it happens.

ticker code is here
setting a hardcoded height param may fix it but I need the ticker to resize on different screen sizes. Ideas?

Move false when the ticker is not in view

Hi!
I would like to know if it's possible to configure the ticker to stop moving when it's not in-view.

Thanks!

Can't get it to work as described, just rendering a div with a 0 in it

When I'm using this component as described it just returns a div with a 0 inside of it.

I tried various things always with the same result. A few of my attempts that I think should work according to the examples and the descriptions.

<Ticker>
  {(index) => (
    <div>Testing</div>
  )}
</Ticker>

or

<Ticker>
  <div>Testing</div>
</Ticker>

This is what's rendered, and nothing happens other than printing out the 0:

<div class="ticker" style="position: relative; overflow: hidden;">0</div>

Using React 16.7.

Failed to compile

Hello,

I wanted to use this package to move the products from right to left, but instead I'm getting module not found error.

Code:

Error:

Package.json:

Thanks for your help ! :)

Sticky item when using direction="toRight"

when i use direction="toRight" there will be a sticky part of my content on the left please is there any fix for that , the same issue is reported in #19

When using chain with dynamic elements, the first element overlaps with the last element

Seen in the image below

				<Ticker offset="run-in" direction={direction} move={move} mode="chain">
					{children}
				</Ticker>

Distance between boxes is not always homogeneous

Hey @AndreasFaust, thanks for the great library, it does exactly what we were looking for.

At the same time, I have noticed that the boxes don't always have the same distance one to another as you can see from the following image. It is very subtle, but the first gutter is slightly bigger than the second:

To reproduce, I have created a little sandbox that might help you find the issue: https://codesandbox.io/s/eloquent-driscoll-o47el

Hopefully, it helps.
Thanks again for the great work.

Ticker only display when I resize the browser

Hello,
Thanks for ticker but It only works when I manually resize the window.. Can you please let me know how to fix it

const WeatherWidget = ({ id, editMode }) => {
 const [initialized, setInitialized] = useState(false);
 const [settings, setSettings] = useState({});
 const [widgetApi, setWidgetApi] = useState();
 const [tickerTitle, setTickerTitle] = useState();
 const [loading, setLoading] = useState(true);
 const [error, setError] = useState();
 const [roles, setRoles] = useState([]);

 const settingsChanged = useCallback(debounce(setSettings, 1000), []);

 useEffect(() => {
   const **setDataRole** = (json) => {
     setRoles(json.data)
   }
   if (widgetApi && initialized && settings.jsonData) {
     var json = validateJSON(settings.jsonData);
     **setDataRole**(json);
   }
 }, [settings])


 return (
   <Container>

     <StyledUl>
       <Ticker>

         {({ index }) => (
           <>
             {roles && roles.map(({ key, value }, i) => (
               <>
                 {i === 0 ? null : ','}

                 <span className="name" style={{ fontSize: "12px", color: settings?.keyColor, whiteSpace: "nowrap", margin: "5px" }}>
                   {key}
                 </span>
                 <span className="goal" style={{ fontSize: "12px", color: settings?.valueColor, whiteSpace: "nowrap", margin: "5px" }}>{value}</span>

               </>
             ))
             }
           </>
         )}
       </Ticker>
     </StyledUl>
   </Container>
 );
};

Is there any way to use it with React 17?

Is there any way to use it with React 17.0.2v ? Is it me because I'm a beginner or is it not possible to use it?

callbacks onNext and onFinish dont seem to be firing.

I created a sandbox based on your own. I have added the callbacks but they dont seem to be firing,

https://codesandbox.io/s/react-ticker-no-callbacks-n7i0t

Also not really sure of the purpose of onFinish as it doesnt offer any arguments.

Thanks

IE11 Expected ':'

IE 11 fails with version 1.2.2, which broke our whole site. The issue seems to be related to the ES6 property shorthand which IE doesn't seem to like.

See screenshot

[BUG] Ticker speeds up only on Safari after hovering multiple times on parent conatiner

I have the Ticker component wrapped with some div (Container), and I'm detecting onHover actions with mouseover and mouseout event listeners. If someone hovers over the Ticker, I want it to stop moving.

Everything works perfectly fine on various browsers, but on Safari I'm getting this weird bug - after repetitive hovering/not hovering element, Ticker component increases its speed (and sometimes it's displaying white space before the next element).

Code sample:

    <Container ref={tickerRef}>
      <Ticker move={!isHovered} speed={5}>
        {() => (
          <div>
            {items.map((item) => {
              return <div key={item.id}>{item.name}</div>;
            })}
          </div>
        )}
      </Ticker>
    </Container>

I managed to solve that issue with removing move prop and then defining speed value based on hovered state (speed={isHovered ? 0 : 5}) but it's far from perfect. I wonder if there are some other ways to fix that issue?

last element stay => after reload bug is fixed

Hello everybody,

i have the problem that on the first start, the last element stay. After i reload the screen or switch the tabs, the bug is away and all is perfect. (look the gif)

fade in out effect and adjust the speed

Hello I am trying to create a fade in and out effect like so
https://www.netlify.com/

I would also like to adjust to speed. How can I do this?

Alternative

I have been using react-ticker for more than 6 months, but there are still some issues, eg. rendering when browser tab is in background (this has a workaround, but it is not perfect). So recently I've found https://github.com/mxmzb/react-marquee-slider which looks a better option for some cases. Maybe we can add a link to this to the README as an alternative solution?

Issue dynamically changing direction

Hey!
This is so close to the solution I need, but I'm having trouble. I have <Ticker move={move} direction={direction}> set with dynamic direction and move props that are changed by hover events. Starting and stopping work great, but when it changes direction, the whole ticker starts over instead of just changing direction.

Is that something this can do?

Vertical ticker

Hi,
This is really good ticker for horizontal ticker,
but for my project, I need a vertical replacement for the marquee from html.
I search all over the internet and didn’t see anyone who did it good, and because your component is one of the best I've seen, It will be really great if it would support vertical also.
Thanks in advance.

Resizing screen with long string causes multiple lines

First - Nice job on this! I feel bad for being whiny

Now to pour the whine...
If I start with a large screen and a large string (over 100 characters) and then resize the screen to be smaller, then text then appears on multiple lines. Additionally, if height is specified, you might not see the extra lines if they are beyond the space you requested.

Add License

Nice work. This project needs a license though. A repository without a license falls under the default copyright laws, meaning that you retain all rights to your source code and no one may reproduce, distribute, or create derivative works from your work. If that's what you're after then fine, but it should still have a license.

https://docs.github.com/en/github/creating-cloning-and-archiving-repositories/creating-a-repository-on-github/licensing-a-repository#choosing-the-right-license

Rendering an array, I want ticker to show one content at a time.

Hi, here is my code

function FactsTicker() {
const updates = [
{ info: "1" },
{ info: "2" }
]
return (
<>
<h3 style={{ color: 'black' }}>Did you know?
<Ticker mode='await' speed={20} offset="run-in" style={{width: '100%', overflow: 'hidden'}}>
{() => (
<>

{updates.map((update) => (
{update.info}
))}

</>
)}

</>
)
}

I want to show elements one at a time, so after "1" has passed, then "2" will appear.

WHat is happening in the code above is =
12 12 12.

When I tried putting the map() method before the Ticker, then it has 2 columns and appears at the same time, like
1 1 1
2 2 2