Screen Resizing for lottie animation in React js-CodePudding

I am working on a website that has a lottie animation on it's landing page, how do i resize the lottie component such that display is set to none on mobile devices.

lottie component below

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";

export default function App() {
  const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
  preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
<div id="lottie">
  <Lottie
    options={defaultOptions}
    height={800}
    width={1000}
    style={{
      top: "30%",
      right: "10%",
      zIndex: -1,
      overflow: "hidden",
      position: "fixed",
    }}
  />
</div>
  );
}

here is the home component.

import Lottie from "../Components/Lottie";
import React from "react";

function Landing () => {
  let width = window.innerWidth;
  if (width > 600px) {
console.log(width);
  } else {
document.getElementById("lottie").style.display = "none";
   }
  <Lottie className="col-lg-8 col-sm-12 lottie d-none" />
}

export default Landing;

I also tried using external CSS

@media screen and (max-width: 600px) {
  .lottie {
display: none !important;
  }
}

CodePudding user response：

So the thing is, with react you can conditionally render components without having to use native dom manipulations such as document.getElementById.

First, let's try to simplify the way you get your windows size :
Create some kind of exported function that you can reuse somewhere else
windowDimensions.js

export function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

Then import it in your App

import React from "react";
import Lottie from "react-lottie";
import data from "./Lottie/87736-car-animation.json";
import {getWindowDimensions} from './windowDimensions.js';

export default function App() {
  const defaultOptions = {
loop: true,
autoplay: true,
animationData: data,
rendererSettings: {
  preserveAspectRatio: "xMidYMid slice",
    },
  };

  return (
<div id="lottie">
// Here we use our conditional rendering
{ getWindowDimensions().width > 600 &&
  <Lottie
    options={defaultOptions}
    height={800}
    width={1000}
    style={{
      top: "30%",
      right: "10%",
      zIndex: -1,
      overflow: "hidden",
      position: "fixed",
    }}
  />
</div>
}
  );
}

This code will only render your lottie component if the window width is greater than 600. Of course, you could still use css conditional rendering and your code seems ok for that. Maybe try with visibility: hidden instead on your media query. Careful, you are defining an id lottie in your react code which should be used as #lottie in your css. You are currently using it as .lottie in your css which refers to a class. This is probably why your css aproach is not working.
Finally I would also take a look at what the classes you are adding to your lottie component refer to.

Hope this gives you a place to start investigating from.
Here are some docs about conditional rendering.

CodePudding user response：

Your css won't affect your lottie because .lottie is a class but your lottie is defined as an id, so use #lottie instead:

@media screen and (max-width: 600px) {
  #lottie {
    display: none !important;
  }
}

CodePudding user response：

in <Lottie /> remove d-none and add d-lg-block d-md-block d-sm-none d-none it'll do the trick