Modal Only Content

A flexible and customizable modal component built on top of Ant Design (antd) for React applications.

Overview

This ModalOnlyContent component provides an enhanced modal experience with features that go beyond the standard Ant Design Modal. It offers a seamless integration with your existing Ant Design projects while adding powerful customization options.

Features

• Flexible Layout: Custom headers, footers, and content areas
• Resizable: Automatically resize when container size changes (e.g. collapsing or dragging left menu will cause modal to resize to custom width)
• Click Outside: Option to close modal when clicking outside
• Smooth Transitions: Elegant animations for opening and closing
• Button Customization: Swap button order, customize button text and types
• Loading States: Support for loading states in buttons
• Responsive Design: Adapts to the container size

Installation

npm install modal-only-content
# or
yarn add modal-only-content

Requirements

• React 17.0.0 or higher
• Ant Design (antd) 5.0.0 or higher
• Node.js 14.0.0 or higher

Usage

Basic Usage

import { ModalOnlyContent } from "modal-only-content";
import { useState } from "react";

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

  const handleOpen = () => setIsModalOpen(true);
  const handleCancel = () => setIsModalOpen(false);
  const handleOk = () => {
    console.log("OK clicked");
    setIsModalOpen(false);
  };

  return (
    <div>
      <button onClick={handleOpen}>Open Modal</button>

      <ModalOnlyContent
        open={isModalOpen}
        onCancel={handleCancel}
        onOk={handleOk}
        title="Sample Modal"
      >
        <p>This is the content of the modal</p>
      </ModalOnlyContent>
    </div>
  );
}

Advanced Usage

import { ModalOnlyContent } from "modal-only-content";
import { useState } from "react";
import { Button } from "antd";

function AdvancedModal() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [loading, setLoading] = useState(false);

  const handleOpen = () => setIsModalOpen(true);

  const handleOk = async () => {
    setLoading(true);
    try {
      // Simulate an API call
      await new Promise((resolve) => setTimeout(resolve, 2000));
      console.log("Form submitted");
      setIsModalOpen(false);
    } finally {
      setLoading(false);
    }
  };

  const customHeader = (
    <div
      style={{
        padding: "16px",
        background: "#f0f2f5",
        display: "flex",
        justifyContent: "space-between",
      }}
    >
      <h3>Custom Header Example</h3>
      <Button type="text" onClick={() => setIsModalOpen(false)}>
        ×
      </Button>
    </div>
  );

  const customFooter = (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        padding: "10px 16px",
      }}
    >
      <Button>Help</Button>
      <div>
        <Button
          style={{ marginRight: 8 }}
          onClick={() => setIsModalOpen(false)}
        >
          Cancel
        </Button>
        <Button type="primary" loading={loading} onClick={handleOk}>
          Submit
        </Button>
      </div>
    </div>
  );

  return (
    <div>
      <Button type="primary" onClick={handleOpen}>
        Open Advanced Modal
      </Button>

      <ModalOnlyContent
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
        header={customHeader}
        footer={customFooter}
        clickOutside={true}
      >
        <div style={{ height: "300px", padding: "20px" }}>
          <h4>Customizable Content Area</h4>
          <p>This modal demonstrates custom header and footer sections.</p>
          <p>You can also close this modal by clicking outside.</p>
        </div>
      </ModalOnlyContent>
    </div>
  );
}

Props

Prop	Type	Default	Description
open	boolean	required	Controls whether the modal is visible
children	ReactNode	-	Content to display inside the modal
title	ReactNode	-	Title text or element for the modal header
header	ReactNode	-	Custom header component (overrides the default header)
footer	ReactNode	-	Custom footer component (overrides the default footer)
okText	ReactNode	"OK"	Text for the OK button
cancelText	ReactNode	"cancel"	Text for the Cancel button
okType	ButtonType	"primary"	Type of the OK button (e.g., 'primary', 'default')
onCancel	() => void	-	Callback when Cancel button is clicked
onOk	() => void	-	Callback when OK button is clicked
loading	boolean	false	Controls loading state of buttons
OkDisabled	boolean	false	Disables the OK button when true
clickOutside	boolean	false	Allows closing the modal by clicking outside
swapButtonFooter	boolean	false	Swaps the position of OK and Cancel buttons
okButtonProps	ButtonProps	-	Additional props for the OK button

Styling

The component uses antd-style for styling. You can override the default styles by targeting the CSS classes or using the Ant Design theme configuration.

Accessibility

The modal is designed with accessibility in mind:

• Keyboard navigation support
• Proper focus management
• ARIA attributes for screen readers

Browser Compatibility

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)
• IE 11 (with appropriate polyfills)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT