Fade

Fade in from transparent to opaque.

This component uses react-spring to create animation.

Import

copy
import { Fade } from '@trendmicro/react-styled-ui';
import { Fade } from '@trendmicro/react-styled-ui';

Usage

Basic usage

EDITABLE EXAMPLE
copy
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);

  return (
    <Box whiteSpace="pre-wrap">
      <Box mb="2x">
        <Button variantColor="green" onClick={handleToggle}>
          Toggle
        </Button>
      </Box>
      <Box height={64}>
        <Fade show={show}>
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Fade>
      </Box>
    </Box>
  );
}
function Example() {
  const [show, setShow] = React.useState(false);
  const handleToggle = () => setShow(!show);

  return (
    <Box whiteSpace="pre-wrap">
      <Box mb="2x">
        <Button variantColor="green" onClick={handleToggle}>
          Toggle
        </Button>
      </Box>
      <Box height={64}>
        <Fade show={show}>
          Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.
        </Fade>
      </Box>
    </Box>
  );
}

Props