Rotate
Rotate is a component that provides an animation to switch between two elements while rotating.
<Rotate
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Usage
import { Rotate } from "@yamada-ui/react"
import { Rotate } from "@/components/ui"
import { Rotate } from "@workspaces/ui"
<Rotate />
Change Rotate
To change the rotate, set rotate to a numerical value. By default, 45 is set.
<Rotate
rotate={-360}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Change Duration
To change the duration, set a numerical value (seconds) to duration.
<Rotate
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.
<Rotate
delay={1}
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Disable
To disable, set disabled to true.
<Rotate
disabled
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Read-Only
To ready-Only, set readOnly to true.
<Rotate
readOnly
from={<AppleIcon fontSize="2xl" />}
to={<CherryIcon fontSize="2xl" />}
/>
Control
const [value, onChange] = useState<KeyframeIdent>("from")
return (
<Rotate
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.