Backdrop

Backdrop.tsx

import React from 'react';

interface BackdropProps {
  show: boolean;
  onClick?: () => void;
}

const Backdrop: React.FC<BackdropProps> = ({ show, onClick }) => {
  return show ? (
    <div className="backdrop" onClick={onClick}></div>
  ) : null;
};

export default Backdrop;

Usage

import React, { useState } from 'react';
import Backdrop from './Backdrop';

const ExampleComponent: React.FC = () => {
  const [showBackdrop, setShowBackdrop] = useState(false);

  const handleButtonClick = () => {
    setShowBackdrop(true);
  };

  const handleBackdropClick = () => {
    setShowBackdrop(false);
  };

  return (
    <>
      <button onClick={handleButtonClick}>Show Backdrop</button>
      <Backdrop show={showBackdrop} onClick={handleBackdropClick} />
    </>
  );
};

export default ExampleComponent;

Related Components