@chakra-ui/transition
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.2 • Public • Published

    @chakra-ui/transition

    Installation

    yarn add @chakra-ui/transition
    # or
    npm i @chakra-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

    import { Collapse } from "@chakra-ui/transition"

    Usage

    function SampleSpring() {
      const { isOpen, onToggle } = useDisclosure()
      return (
        <>
          <Button onClick={onToggle}>Click</Button>
          <Collapse isOpen={isOpen}>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </Collapse>
        </>
      )
    }

    Changing the starting height

    function Example() {
      const [show, setShow] = React.useState(false)
    
      const handleToggle = () => setShow(!show)
    
      return (
        <>
          <Collapse startingHeight={20} isOpen={show}>
            Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
            terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
            labore wes anderson cred nesciunt sapiente ea proident.
          </Collapse>
          <Button size="sm" onClick={handleToggle} mt="1rem">
            Show {show ? "Less" : "More"}
          </Button>
        </>
      )
    }

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

    Install

    npm i @chakra-ui/transition

    DownloadsWeekly Downloads

    294,820

    Version

    2.0.2

    License

    MIT

    Unpacked Size

    86.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • timkolberger
    • segunadebayo
    • _codebender828