Is it possible to have Sheet at the "bottom" on mobile but "right" on desktop?

[cwikio]

I use tailwind and would like to have a different behaviour on mobile than on desktop

[Joshuajrodrigues]

I usually use a hook to check the screen width and accordingly switch the direction state.

[WatanabeThiago]

how?

[Naresh-Khatri]

you can create a hook to check if viewport is mobile or desktop.

export function useMediaQuery(query: string) {
  const [value, setValue] = React.useState(false);

  React.useEffect(() => {
    function onChange(event: MediaQueryListEvent) {
      setValue(event.matches);
    }

    const result = matchMedia(query);
    result.addEventListener("change", onChange);
    setValue(result.matches);

    return () => result.removeEventListener("change", onChange);
  }, [query]);

  return value;
}

then use it in a react component like this
const isMobile = useMediaQuery("(max-width: 480px)");

after this you can conditionally add the side prop

<SheetContent side={isMobile ? 'bottom' : 'right'}>
    ....
</SheetContent> 

[gchandra25]

you can use `const [side, setSide] = useState("right");

useEffect(() => {
const updateSide = () => {
if (window.innerWidth < 640) {
setSide("bottom");
} else {
setSide("right");
}
};

updateSide(); // Set initial value
window.addEventListener("resize", updateSide); // Update on resize

return () => window.removeEventListener("resize", updateSide);

}, []);and



{post.replies || 0}

                <SheetContent side={side} className="max-sm:h-[540px]">
                  <SheetHeader>
                    <SheetTitle>Are you absolutely sure?</SheetTitle>
                    <SheetDescription>{post.content}</SheetDescription>
                  </SheetHeader>
                </SheetContent>
              </Sheet>`