@teste-ui/transition

Installation

1yarn add @teste-ui/transition
2# or
3npm i @teste-ui/transition

Collapse

The Collapse component is used to create regions of content that can expand/collapse with a simple animation. It helps to hide content that's not immediately relevant to the user.

Import component

1import { Collapse } from "@teste-ui/transition"

Usage

1function SampleSpring() {
2  const { isOpen, onToggle } = useDisclosure()
3  return (
4    <>
5      <Button onClick={onToggle}>Click</Button>
6      <Collapse isOpen={isOpen}>
7        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
8        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
9        labore wes anderson cred nesciunt sapiente ea proident.
10      </Collapse>
11    </>
12  )
13}

Changing the starting height

1function Example() {
2  const [show, setShow] = React.useState(false)
3
4  const handleToggle = () => setShow(!show)
5
6  return (
7    <>
8      <Collapse startingHeight={20} isOpen={show}>
9        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
10        terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
11        labore wes anderson cred nesciunt sapiente ea proident.
12      </Collapse>
13      <Button size="sm" onClick={handleToggle} mt="1rem">
14        Show {show ? "Less" : "More"}
15      </Button>
16    </>
17  )
18}

// TODO: Explain the framer-motion part and how to customize the motion variants