Airy
Airy is a component that provides a smooth animation to switch between two elements.
<Airy from={<MenuIcon fontSize="2xl" />} to={<XIcon fontSize="2xl" />} />
Usage
import { Airy } from "@yamada-ui/react"
import { Airy } from "@/components/ui"
import { Airy } from "@workspaces/ui"
<Airy />
Change the Duration
To change the duration, set a numerical value (seconds) to duration.
<Airy
duration={0.6}
from={<MenuIcon fontSize="2xl" />}
to={<XIcon fontSize="2xl" />}
/>
Delay
If you want to delay the switch, set a numerical value (seconds) to delay.
<Airy
delay={1}
from={<MenuIcon fontSize="2xl" />}
to={<XIcon fontSize="2xl" />}
/>
Disable
To disable, set disabled to true.
<Airy
disabled
from={<MenuIcon fontSize="2xl" />}
to={<XIcon fontSize="2xl" />}
/>
Read-Only
To ready-Only, set readOnly to true.
<Airy
readOnly
from={<MenuIcon fontSize="2xl" />}
to={<XIcon fontSize="2xl" />}
/>
Control
const [value, onChange] = useState<KeyframeIdent>("to")
return (
<Airy
from={<MenuIcon fontSize="2xl" />}
to={<XIcon fontSize="2xl" />}
value={value}
onChange={onChange}
/>
)
If you use this code, you need to add
"use client" to the top of the file.