Ripple

@devgrace/ui Ripple component

Causes a Ripple effect when clicked.

Caveats

1. You must explicitly give the child element a position (except "static") and a z-index`.
2. Don't give the child element a background Color, use Ripple's bgColor Props.

Failure to follow these precautions may result in the child element being obscured by the Ripple effect, or the child element's click event not firing.

Also, if you give the child element a background Color directly, the Ripple effect may not be visible.

Interface

export interface RippleProps {
  rippleColor?: CSSProperties['backgroundColor']; // default: "#E0E0E0"
  bgColor?: CSSProperties['backgroundColor']; // default: "#FFFFFF"
  borderRadius?: CSSProperties['borderRadius']; // default: '0'
  duration?: number; // default: 800
  fullWidth?: boolean; // default: false
  disabled?: boolean; // default: false
}

const Ripple: ({
  children,
  disabled,
  fullWidth,
  borderRadius,
  rippleColor,
  bgColor,
  duration,
}: PropsWithChildren<RippleProps>) => JSX.Element;

Usage

import { Ripple } from '@devgrace/ui';

const Example = () => {
  const rectBoxStyle = useMemo(() => {
    return {
      position: 'relative', // (*)
      zIndex: '10', // (*)
      padding: '10px 15px',
      border: '1px solid #111',
    };
  }, []);

  const roundBoxStyle = useMemo(() => {
    return {
      position: 'relative', // (*)
      zIndex: '10', // (*)
      padding: '10px 15px',
      border: '1px solid #111',
      borderRadius: '8px',
    };
  }, []);

  return (
    <>
      <Ripple>
        <div style={rectBoxStyle}>Default Ripple Rect Box</div>
      </Ripple>
      <br />
      <Ripple borderRadius={8}>
        <div style={roundBoxStyle}>Round Ripple Rect Box</div>
      </Ripple>
      <br />
      <Ripple borderRadius={8} rippleColor={'#FBC02D'} bgColor={'#FFEB3B'}>
        <div style={roundBoxStyle}>Ripple Rect Box</div>
      </Ripple>
    </>
  );
};

Example

Ripple Rect Box

Ripple Round Box

Ripple Round Box