Rotate

Rotate is a component that provides an animation to switch between two elements while rotating.

Import

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

Copied!

Usage

Set the elements to switch between as from and to.

Editable example

return <Rotate from={<Sun fontSize="6xl" />} to={<Moon fontSize="6xl" />} />

Copied!

Change the Angle

To change the angle, set a number (degrees) to rotate.

Editable example

return (
  <Rotate
    rotate={360}
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

Change the Duration

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

Editable example

return (
  <Rotate
    duration={0.6}
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

Add a Delay

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

Editable example

return (
  <Rotate
    delay={1}
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

Disable

To disable, set isDisabled to true.

Editable example

return (
  <Rotate
    isDisabled
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

ReadOnly

To readyOnly, set isReadOnly to true.

Editable example

return (
  <Rotate
    isReadOnly
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

Control

Editable example

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

return (
  <Rotate
    value={value}
    onChange={onChange}
    from={<Sun fontSize="6xl" />}
    to={<Moon fontSize="6xl" />}
  />
)

Copied!

Edit this page on GitHub

PreviousFlip NextScaleFade