react-ticker
react-ticker copied to clipboard
AndreasFaust
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 ! ^^
Finally I used a CSS ticker :
<div style={{ overflow: isScrollable ? 'hidden' : 'initial' }} ref={blockRef}>
<div className={clsx(isScrollable ? 'ticker' : '', ' text-white')} style={{ animationDuration: `15s` }}>
<p style={{ paddingRight: '0.5em', whiteSpace: 'nowrap' }} className="ticker_item" ref={ref}>
{text}
</p>
</div>
</div>
@keyframes ticker {
0% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
visibility: visible;
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
}
$duration: 30s;
.ticker {
display: inline-block;
white-space: nowrap;
padding-right: 100%;
box-sizing: content-box;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-name: ticker;
animation-name: ticker;
-webkit-animation-duration: $duration;
animation-duration: $duration;
&__item {
display: inline-block;
font-size: 2rem;
}
}
FYI I had exactly the same issue on my Next.js build so I swapped it with this package react-fast-marquee. Works well and the code markup is much cleaner.
I hope that helps somebody else having issues here.
I ended up doing the same, works great.
FYI I had exactly the same issue on my Next.js build so I swapped it with this package react-fast-marquee. Works well and the code markup is much cleaner.
I hope that helps somebody else having issues here.
@JoolianGarcia @hongweitang @qlaffont @CruiseDevice @reedislost It looks like this library is not working with React 18 at the moment. I found a simple solution and I created a library to make it working: https://github.com/cyntler/render-with-react17.
You can install the library with npm i render-with-react17 and then use it in this way:
import Ticker from 'react-ticker';
import { RenderWithReact17 } from 'render-with-react17';
<RenderWithReact17>
<Ticker
mode="await"
speed={10}
direction="toLeft"
offset="run-in"
>
{() => <p>{description}</p>}
</Ticker>
</RenderWithReact17>
@cyntler Your. solution is not working. Because Ticker can't be loaded. It gives Ticker error.
