Transitions

Nature UI exports four components `Fade`, `ScaleFade`, `Slide`, and `SlideFade` to provide simple transitions.

Nature UI exports four components Fade, ScaleFade, Slide, and SlideFade to provide simple transitions.

Import#

Most transition components are made using framer-motion. They accept the following props:

Common props from framer's motion elements
in prop used to trigger the transition
unmountOnExit prop used to unmount the component when it is not visible.

import { Fade, ScaleFade, Slide, SlideFade } from "@nature-ui/core";

Usage#

Fade transition#

function FadeEx() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onClick={onToggle} className="bg-purple-500">
        Click Me
      </Button>
      <Fade in={isOpen}>
        <Box className="p-4 text-white bg-teal-500 rounded-md shadow-md mt-4">
          Fade
          <Lorem count={1} />
        </Box>
      </Fade>
    </>
  );
}

ScaleFade transition#

function ScaleFadeEx() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onClick={onToggle} className="bg-purple-500">
        Click Me
      </Button>
      <ScaleFade initialScale={0.9} in={isOpen}>
        <Box className="p-4 text-white bg-teal-500 rounded-md shadow-md mt-4">
          Scale Fade
          <Lorem count={1} />
        </Box>
      </ScaleFade>
    </>
  );
}

Slide transition#

function SlideEx() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onClick={onToggle} className="bg-purple-500">
        Click Me
      </Button>
      <Slide direction="bottom" in={isOpen} style={{ zIndex: 10 }}>
        <Box className="p-10 text-white bg-teal-600 rounded-md shadow-md mt-4">
          Slide <br />
          <br />
          <Lorem count={1} />
        </Box>
      </Slide>
    </>
  );
}

Slide Fade transition#

function SlideFadeEx() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onClick={onToggle} className="bg-purple-500">
        Click Me
      </Button>
      <SlideFade in={isOpen}>
        <Box className="p-10 text-white bg-teal-500 rounded-md shadow-md mt-4">
          Slide Fade <br />
          <br />
          <Lorem count={1} />
        </Box>
      </SlideFade>
    </>
  );
}

Collapse transition#

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.

function CollapseEx() {
  const { isOpen, onToggle } = useDisclosure();

  return (
    <>
      <Button onClick={onToggle} className="bg-purple-500">
        Click Me
      </Button>
      <Collapse in={isOpen}>
        <Box className="p-10 text-white bg-teal-500 rounded-md shadow-md mt-4">
          Collapses <br />
          <br />
          <Lorem count={1} />
        </Box>
      </Collapse>
    </>
  );
}

Changing the startingHeight#

function Example() {
  const [show, setShow] = React.useState(false);

  const handleToggle = () => setShow(!show);

  return (
    <>
      <Collapse startingHeight={20} in={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} className="mt-4 bg-purple-500">
        Show {show ? "Less" : "More"}
      </Button>
    </>
  );
}

Props#

The transition components extends the framer-motion.

Fade Props#

Name	Type	Default	Description
isOpen	`boolean`	-	Show the component; triggers the enter or exit states
unmountOnExit	`boolean`	-	If `true`, the element will unmount when `in={false}` and animation is done

ScaleFade Props#

Name	Type	Default	Description
isOpen	`boolean`	-	Show the component; triggers the enter or exit states
initialScale	`number`	`0.95`	The initial scale of the element
unmountOnExit	`boolean`	-	If `true`, the element will unmount when `in={false}` and animation is done

Slide Props#

Name	Type	Default	Description
direction	`"top"` \| `"right"` \| `"bottom"` \| `"left"`	`"right"`	The direction to slide from
isOpen	`boolean`	-	Show the component; triggers the enter or exit states
unmountOnExit	`boolean`	-	If `true`, the element will unmount when `in={false}` and animation is done

SlideFade Props#

Name	Type	Default	Description
isOpen	`boolean`	-	If `true`, the content will animate in
initialOffset	`string`	-	The offset on the vertical or `y` axis
unmountOnExit	`boolean`	-	If `true`, the element will unmount when `in={false}` and animation is done

Collapse Props#

Name	Type	Default	Description
animateOpacity	`boolean`	-	If `true`, the opacity of the content will be animated
in	`boolean`	`false`	If `true`, the content will be expanded
startingHeight	`string` \| `number`	`0`	The height you want the content in its collapsed state.
unmountOnExit	`boolean`	-	If `true`, the element will unmount when `in={false}` and animation is done