Flip
Flip is a component that provides an animation to switch between two elements while flipping.
<Flip from={<AppleIcon fontSize="2xl" />} to={<CherryIcon fontSize="2xl" />} />
Usage
import { Flip } from "@yamada-ui/react"
import { Flip } from "@/components/ui"
import { Flip } from "@workspaces/ui"
<Flip />
Change Direction
To change the direction, set orientation to "horizontal" or "vertical". By default, "horizontal" is set.
<Flip
orientation="vertical"
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Change the Duration
To change the duration, set a numerical value (seconds) to duration.
<Flip
duration={1.4}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Delay
If you want to delay the switch, set a numerical value (seconds) to delay.
<Flip
delay={1}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Disable
To disable, set disabled to true.
<Flip
disabled
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Read-Only
To ready-Only, set readOnly to true.
<Flip
readOnly
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Control
const [value, onChange] = useState<KeyframeIdent>("from")
return (
<Flip
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
value={value}
onChange={onChange}
/>
)
If you use this code, you need to add
"use client" to the top of the file.