Airy

Airy is a component that provides a smooth animation to switch between two elements.

Import

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

Copied!

Usage

Set the elements to switch between as from and to.

Editable example

return (
  <Airy
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

Change the Duration

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

Editable example

return (
  <Airy
    duration={0.6}
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

Add a Delay

If you want to delay the switch, set a numerical value (seconds) to delay.

Editable example

return (
  <Airy
    delay={1}
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

Disable

To disable, set isDisabled to true.

Editable example

return (
  <Airy
    isDisabled
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

ReadOnly

To readyOnly, set isReadOnly to true.

Editable example

return (
  <Airy
    isReadOnly
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

Control

Editable example

const [value, onChange] = useState<AiryIdent>("to")

return (
  <Airy
    value={value}
    onChange={onChange}
    from={<Text fontSize="2xl">ON</Text>}
    to={<Text fontSize="2xl">OFF</Text>}
  />
)

Copied!

Edit this page on GitHub

PreviousTransitions NextCollapse