Flip

Flip is a component that provides an animation to switch between two elements while flipping.

Import

import { Flip } from "@yamada-ui/react"

Copied!

Usage

Set the elements to switch between as from and to.

Editable example

return (
  <Flip
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Change Direction

To change the direction, set orientation to either "vertical" or "horizontal". The default is "horizontal".

Editable example

return (
  <Flip
    orientation="vertical"
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Change Duration

To change the duration, set duration to a number (seconds).

Editable example

return (
  <Flip
    duration={1.4}
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Add Delay

To delay the switch, set delay to a number (seconds).

Editable example

return (
  <Flip
    delay={1}
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Disable

To disable, set isDisabled to true.

Editable example

return (
  <Flip
    isDisabled
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

ReadOnly

To readyOnly, set isReadOnly to true.

Editable example

return (
  <Flip
    isReadOnly
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Control

Editable example

const [value, onChange] = useState<FlipIdent>("from")

return (
  <Flip
    value={value}
    onChange={onChange}
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Customize

Editable example

return (
  <Flip
    transition={{
      type: "spring",
      damping: 10,
      stiffness: 120,
    }}
    from={<AppleIcon fontSize="6xl" />}
    to={<CherryIcon fontSize="6xl" />}
  />
)

Copied!

Edit this page on GitHub

PreviousFade NextRotate