Dimmed

@devgrace/ui Dimmed 컴포넌트

interface

const Dimmed: React.ForwardRefExoticComponent<
  Omit<DimmedProps, 'ref'> & React.RefAttributes<HTMLDivElement>
>;

export interface DimmedProps
  extends PropsWithChildren<React.ComponentProps<'div'>> {
  alpha?: string | number; // default: 0.6, A in RGBA. 
  zIndex?: CSSProperties['zIndex']; // default: 1000, Dimmed의 z-index 값입니다.
  isShow?: CSSTransitionProps['in']; // default: false, "Dimmed"를 노출 여부를 판단하는 값입니다.
  isTransition?: boolean; // default: true, transition효과를 줄 것인지 판단하는 값입니다.
  timeout?: CSSTransitionProps['timeout']; // default: 200, transition의 duration 값입니다.
  bodyStyle?: CSSProperties; // custom style
}

Usage

import { Dimmed, Button } from '@devgrace/ui';
import { useOnClickOutside } from '@devgrace/react';

const Example = () => {
  const [isShow, setIsShow] = useState(false);
  const { ref } = useOnClickOutside<HTMLDivElement>(() => setIsShow(false));

  const boxStyle = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    width: '300px',
    height: '300px',
    backgroundColor: '#fff',
  };

  return (
    <div>
      <Button onClick={() => setIsShow(true)}>Open Dimmed</Button>
      <Dimmed isShow={isShow}>
        <div ref={ref} style={boxStyle}>
          INNER BOX
        </div>
      </Dimmed>
    </div>
  );
};

Example