Media query collapsed

[Qudusayo]

Couldn't find a way to make the dropdown component closed on mobile and open on the desktop without transition.

It works as I expected on mobile, but due to update from useEffect, there's transition on desktop as it's set to open

  const [isExpanded, setisExpanded] = useState<boolean>(false);
  const { getCollapseProps, getToggleProps } = useCollapse({
    isExpanded,
    defaultExpanded: false,
  });

  useEffect(() => {
    if (window.innerWidth > 700) {
      setisExpanded(true);
    }
  }, []);

With this code above, there's a transition on desktop when component mounts

https://user-images.githubusercontent.com/51055890/215252211-87c1253b-74dd-43b2-bf94-3b5a3ecf8bd1.mov

[roginfarrer]

If you're not server-side rendering, you can skip the useEffect altogether:

const [isExpanded, setisExpanded] = useState<boolean>(window.innerWidth > 700);
const { getCollapseProps, getToggleProps } = useCollapse({isExpanded});

You're also not supposed to use defaultExpanded and isExpanded together, so you should leave out defaultExpanded.

You can also use the hasDisabledAnimation to enable/disable transitions at any point in the hook's lifecycle.

[Qudusayo]

Can you help with a sample code ?