React Modal Core

A lightweight and customizable modal solution for React applications with smooth animations and body scroll locking.

Features

• 🎭 Smooth mounting/unmounting animations
• 🚫 Body scroll locking with padding compensation
• 📱 Mobile-friendly
• 🎨 Customizable styles and transitions
• 🖱️ Easy event handling
• 🏗️ Portal-based implementation

Installation

npm install react-modal-core

Basic Usage

import { useModal, Modal } from 'react-modal-core';

function Component() {
  const modal = useModal({
    divId: 'modal-root',
    transitionDuration: 300,
  });

  const { openModal, closeModal } = modal;

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

      <Modal {...modal}>
        <h1>Modal Content</h1>
        <button onClick={closeModal}>Close</button>
      </Modal>
    </div>
  );
}

Default Styles

Backdrop Styles

 {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
}

Backdrop Styles active

 {
  opacity: 1;
  pointer-events: 'auto';
}

Modal Styles

 {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 8px 16px;
  background-color: white;
  border-radius: 8px;
  user-select: none;
}

API Reference

useModal Hook

Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | divId | string | - | Required. The ID for the portal container | | transitionDuration? | number | 0 | Duration of the transition in milliseconds | | transitionTimingFunction? | string | 'ease' | CSS transition timing function | | initialModalState? | boolean | false | Initial state of the modal | | isBodyOverflowDisable? | boolean | false | Disables body overflow handling | | onOpenModal? | function | - | Callback when modal opens | | onCloseModal? | function | - | Callback when modal closes |

Return Values

| Value | Type | Description | | -------------------------- | -------- | ------------------------------------- | | divId | string | The portal container ID | | transitionDuration | number | Transition duration | | transitionTimingFunction | string | Transition timing function | | isModalActive | boolean | If modal is mounted | | isModalVisible | boolean | If modal is visible (for transitions) | | openModal | function | Opens the modal | | closeModal | function | Closes the modal |

Modal Component

Props

| Prop | Type | Description | |------|------|-------------| | children | ReactNode | Modal content | | divId | string | Portal container ID | | transitionDuration | number | Transition duration | | transitionTimingFunction | string | Transition timing function | | isModalActive | boolean | If modal is mounted | | isModalVisible | boolean | If modal is visible | | closeModal | function | Function to close modal | | styleBackdrop? | CSSProperties | Custom backdrop styles | | styleModal? | CSSProperties | Custom modal styles | | classNameBackdrop? | string | Backdrop className | | classNameModal? | string | Modal className | | eventsBackdrop? | DOMAttributes | Backdrop event handlers | | eventsModal? | DOMAttributes | Modal event handlers |

Advanced Usage

Custom Styles and Class Names

import { useModal, Modal } from 'react-modal-core';

function Component() {
  const modal = useModal({
    divId: 'modal-root',
    transitionDuration: 300,
  });

  const { openModal, closeModal, isModalVisible } = modal;

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

      <Modal
        {...modal}
        classNameBackdrop="custom-backdrop"
        classNameModal="custom-modal"
        styleBackdrop={{
          ...(isModalVisible && { opacity: '1' }),
          ...(!isModalVisible && { opacity: '0' }),
        }}
        styleModal={{
          ...(isModalVisible ? { width: '80%' } : { width: ' 100%' }),
        }}
      >
        {/* content */}
      </Modal>
    </div>
  );
}

Custom Event Handlers

<Modal
  {...modal}
  eventsBackdrop={{
    onMouseEnter: () => console.log('Backdrop hover'),
  }}
  eventsModal={{
    onClick: () => console.log('Modal clicked'),
  }}
>
  {/* content */}
</Modal>

Why React Modal Core?

• Smooth Animations: Properly handles mounting/unmounting with transitions
• Body Scroll Lock: Prevents background scrolling while modal is open
• Mobile Ready: Handles mobile devices appropriately
• Customizable: Full control over styles and behavior
• Lightweight: Minimal dependencies and bundle size

License

MIT