Custom Modal Component in Css and React Js

• I'll guide you through creating a custom modal component in React and we will style it purely with CSS, including the use of CSS variables for easier theme management.

Step 1: The Modal Component

• We'll start with the React component. This example assumes you're using functional components and hooks.

    import React, { useState, useEffect } from 'react';

    import './Modal.css'; // Import the CSS file for styling

    const Modal = ({ isOpen, toggle, children }) => {

        // Listen for escape key press to close the modal

        useEffect(() => {

            const closeOnEscapeKey = (e) => e.key === 'Escape' ? toggle() : null;

            document.body.addEventListener('keydown', closeOnEscapeKey);

            return () => document.body.removeEventListener('keydown', closeOnEscapeKey);

        }, [toggle]);

        if (!isOpen) {

            return null;

        }

        return (

            <div className="modal" onClick={toggle}>

                <div className="modal-content" onClick={(e) => e.stopPropagation()}>

                    <span className="close-button" onClick={toggle}>&times;</span>

                    {children}

                </div>

            </div>

        );

    };

    export default Modal;

Step 2: The CSS Styling

• Now, let's add some CSS for the modal. We'll include CSS variables for easy customization. Save this as `Modal.css`.

    :root {

        --modal-background-color: rgba(0, 0, 0, 0.5);

        --modal-content-background-color: white;

        --modal-content-border-radius: 10px;

        --modal-transition: all 0.3s ease;

    }

    .modal {

        position: fixed;

        z-index: 1000;

        left: 0;

        top: 0;

        width: 100%;

        height: 100%;

        overflow: auto;

        background-color: var(--modal-background-color);

        display: flex;

        align-items: center;

        justify-content: center;

        animation: fadeIn var(--modal-transition);

    }

    .modal-content {

        background-color: var(--modal-content-background-color);

        margin: auto;

        padding: 20px;

        border: 1px solid #888;

        width: 80%;

        max-width: 500px;

        border-radius: var(--modal-content-border-radius);

        transition: var(--modal-transition);

    }

    .close-button {

        color: #aaaaaa;

        float: right;

        font-size: 28px;

        font-weight: bold;

    }

    .close-button:hover,

    .close-button:focus {

        color: #000;

        text-decoration: none;

        cursor: pointer;

    }

    @keyframes fadeIn {

        from {

            opacity: 0;

        }

        to {

            opacity: 1;

        }

    }

Step 3: Usage Example

• Finally, here's how you could use this modal component within another component.

    import React, { useState } from 'react';

    import Modal from './Modal'; // Import the Modal component

    const App = () => {

        const [isModalOpen, setIsModalOpen] = useState(false);

        const toggleModal = () => setIsModalOpen(!isModalOpen);

        return (

            <div className="App">

                <button onClick={toggleModal}>Toggle Modal</button>

                <Modal isOpen={isModalOpen} toggle={toggleModal}>

                    <h2>Modal Title</h2>

                    <p>This is modal content</p>

                </Modal>

            </div>

        );

    };

    export default App;

• This setup gives you a customizable modal component with basic styling and transitions that can be easily adjusted using CSS variables. You can expand upon this by adding more props for further customization, such as modal size or animations.