Ripple

Ripple is a component that adds a ripple effect to elements, allowing users to recognize when they have clicked.

Import

import { Ripple, useRipple } from "@yamada-ui/react"

Copied!

Usage

useRipple provides onPointerDown for the parent element, and ripples and onClear for the Ripple component.

ripples: An array of ripple effects generated for each onPointerDown.
onClear: A function needed to clear the ripple effects when the animation of the Ripple component has finished.

Editable example

const { onPointerDown, ripples, onClear } = useRipple()

return (
  <Box
    as="button"
    type="button"
    onPointerDown={onPointerDown}
    py="sm"
    px="md"
    bg="primary"
    color="white"
    rounded="md"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple ripples={ripples} onClear={onClear} />
  </Box>
)

Copied!

It is necessary to set position: relative and overflow: hidden in the parent element's style. This is to define the reference for the Ripple component and to ensure that the ripple effect animation does not overflow the parent element.

Changing the Color

To change the color, set a color to color. By default, currentColor is set.

Editable example

const { onPointerDown, ripples, onClear } = useRipple()

return (
  <Box
    as="button"
    type="button"
    onPointerDown={onPointerDown}
    py="sm"
    px="md"
    bg="primary"
    color="white"
    rounded="md"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple color="secondary.500" ripples={ripples} onClear={onClear} />
  </Box>
)

Copied!

Disabling

To disable, set isDisabled to true.

Editable example

const { onPointerDown, ripples, onClear } = useRipple({ isDisabled: true })

return (
  <Box
    as="button"
    type="button"
    onPointerDown={onPointerDown}
    py="sm"
    px="md"
    bg="primary"
    color="white"
    rounded="md"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple ripples={ripples} onClear={onClear} />
  </Box>
)

Copied!

Alternatively, you can disable in the same way by setting isDisabled to true on the Ripple component.

Editable example

const { onPointerDown, ripples, onClear } = useRipple()

return (
  <Box
    as="button"
    type="button"
    onPointerDown={onPointerDown}
    py="sm"
    px="md"
    bg="primary"
    color="white"
    rounded="md"
    position="relative"
    overflow="hidden"
  >
    <Text>Button</Text>

    <Ripple isDisabled ripples={ripples} onClear={onClear} />
  </Box>
)

Copied!

Edit this page on GitHub

PreviousVisuallyHidden NextSwipeable