Search code examples
javascriptnext.js

Applying class in next.js

I'm trying to convert this class

<div className={`banner-row marquee  ${playMarquee && "animate"}`}>

for next.js.

I can't figure out how to do it.

Solution

  • One way to convert the class for use in a Next.js project would be to use a ternary operator to conditionally assign the "animate" class based on the value of playMarquee.

    <div className={`banner-row marquee ${playMarquee ? "animate" : ""}`}>

    You can also use classnames npm package, it's a small JavaScript utility for conditionally joining classNames together.

    import classNames from 'classnames';
<div className={classNames('banner-row', 'marquee', { animate: playMarquee })}>

    You can use whichever approach you find most readable and maintainable for your project.