@precooked/react-modal NPM

@precooked/react-modal

@precooked/react-modal is a flexible modal component for React projects. It includes customizable options for styles, close button, and supports fullscreen mode.

Installation

npm install @precooked/react-modal

Props

Prop	Type	Default	Description
`isOpen`	`boolean`	required	Controls the modal's visibility.
`onClose`	`() => void`	required	Callback function to close the modal.
`children`	`React.ReactNode`	required	Content to display within the modal.
`backdropStyles`	`React.CSSProperties`	`undefined`	Custom styles for the modal's backdrop.
`windowStyles`	`React.CSSProperties`	`undefined`	Custom styles for the modal window.
`closeButtonStyles`	`React.CSSProperties`	`undefined`	Custom styles for the close button.
`closeIcon`	`string`	`"close"`	Icon for the close button.
`closeIconPaths`	`any[]`	`undefined`	Custom paths for `DynamicIcon` if needed for the close button.
`closeIconSize`	`number`	`24`	Size of the close button icon.
`zIndex`	`number`	`999`	The z-index of the modal.
`id`	`string`	`undefined`	Optional ID for the modal's root element.
`fullScreen`	`boolean`	`false`	When true, the modal takes up the full screen width and height.

Example Usage

import React, { useState } from 'react';
import Modal from '@precooked/react-modal';

const MyComponent = () => {
    const [isOpen, setIsOpen] = useState(false);

    return (
        <div>
            <button onClick={() => setIsOpen(true)}>Open Modal</button>
            <Modal
                isOpen={isOpen}
                onClose={() => setIsOpen(false)}
                fullScreen={true}
                backdropStyles={{ backgroundColor: "rgba(0, 0, 0, 0.6)" }}
                windowStyles={{ borderRadius: "10px" }}
                closeIcon="times"
            >
                <h2>Modal Content</h2>
                <p>This is an example of content inside the modal.</p>
            </Modal>
        </div>
    );
};

export default MyComponent;