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

    1.0.0-rc.9 • 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 @hackr/chakra-ui-transition

    DownloadsWeekly Downloads

    0

    Version

    1.0.0-rc.9

    License

    MIT

    Unpacked Size

    9.98 kB

    Total Files

    4

    Last publish

    Collaborators

    • gnuns