SlideDrawer

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

interface SlideDrawerProps {
  isOpen: boolean;
  onClose: () => void;
  children: React.ReactNode;
}

const SlideDrawer: React.FC<SlideDrawerProps> = ({ isOpen, onClose, children }) => {
  if (!isOpen) return null;

  return (
    <div className="slide-drawer-overlay" onClick={onClose}>
      <div className="slide-drawer-content" onClick={(e) => e.stopPropagation()}>
        <div className="slide-drawer-header">
          <button className="slide-drawer-close" onClick={onClose}>
            ×
          </button>
        </div>
        <div className="slide-drawer-body">
          {children}
        </div>
      </div>
    </div>
  );
};

export default SlideDrawer;

Component info

Dependencies

About

A smooth and accessible side drawer modal component for React applications, featuring a dark background and gold border. Built with TypeScript, this component provides full keyboard support for enhanced usability. With its sleek design and seamless animation, the SlideDrawer is perfect for navigating between different sections of your application. The component's dark background and gold border give it a premium look and feel, making it suitable for a wide range of applications. The SlideDrawer is also highly customizable, allowing developers to tailor its appearance and behavior to meet their specific needs. Whether you're building a complex web application or a simple website, the SlideDrawer is an excellent choice for providing users with an intuitive and engaging experience. By leveraging the power of React and TypeScript, this component ensures fast and efficient rendering, making it an ideal solution for applications that require high performance and responsiveness. With its robust features and sleek design, the SlideDrawer is an excellent addition to any React-based project.