Collapse- The Collapse component, that animates the height of the content.Scale- The Scale component, that scales the element.
import { Collapse, Scale } from "@dreamy-ui/react";Base usage of the Collapse component.
Hello
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}Base usage of the Scale component.
Hello
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Scale
w={"full"}
in={isOpen}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}You can set the starting and ending height of the content by setting the startingHeight and endingHeight props.
Hello
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
startingHeight={10}
endingHeight={80}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can disable the opacity animation by setting the animateOpacity prop to false. This option works for both the Collapse and Scale components.
Hello
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
animateOpacity={false}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can unmount component on exit animation by setting the unmountOnExit prop to true. This option works for both the Collapse and Scale components.
export function Collapsed() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Collapse
w={"full"}
in={isOpen}
unmountOnExit
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Collapse>
</>
);
}You can set the initial scale of the content by setting the initialScale prop. This option works for only for Scale component.
Hello
export function Scaled() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<Button
w={"min-content"}
onClick={() => setIsOpen(!isOpen)}
>
Toggle
</Button>
<Scale
w={"full"}
in={isOpen}
initialScale={0}
>
<Box
bg={"fg"}
color={"bg"}
p={4}
rounded={"md"}
w={"full"}
>
Hello
</Box>
</Scale>
</>
);
}