Smooth Joy Modal

A customizable React modal component built with @mui/joy and react-transition-group, offering smooth transitions and flexible configuration options.

Installation

Install the library and its required peer dependencies:

npm install smooth-joy-modal
npm install @emotion/react @emotion/styled react react-dom

Or using Yarn:

yarn add smooth-joy-modal
yarn add @emotion/react @emotion/styled react react-dom

Usage

import React, { useState } from "react";
import { SmoothModal } from "smooth-joy-modal";

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

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <SmoothModal
        open={isOpen}
        setOpen={setIsOpen}
        modalTitle="My Modal Title"
      >
        <p>Modal content goes here!</p>
      </SmoothModal>
    </div>
  );
};

export default App;

Props

SmoothModalProps

| Prop | Type | Default | Description | | --------------- | ----------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------- | | open | boolean | Required | Controls the open/closed state of the modal. | | setOpen | (open: boolean) => void | Required | Function to update the modal's open state. | | children | ReactNode or (props: { ref: React.RefObject<HTMLDivElement> }) => ReactNode | Required | Content of the modal. Can be a ReactNode or a render function. | | closeReason | CloseReason[] ("backdropClick", "escapeKeyDown", "closeClick") | [] | Specifies which reasons for closing the modal should be ignored. | | keepMounted | boolean | true | Whether to keep the modal mounted in the DOM when closed. | | modalTitle | string or ReactNode | "Modal Title" | Title displayed in the modal. | | asForm | boolean | false | Whether the modal should render as a form. | | formSubmit | (event: React.FormEvent<HTMLFormElement>) => void | undefined | Submission handler for the form (only used if asForm is true). |

Advanced Example: Form in Modal

import React, { useState } from "react";
import { SmoothModal } from "smooth-joy-modal";

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

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("Form submitted!");
    setIsOpen(false);
  };

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Form Modal</button>
      <SmoothModal
        open={isOpen}
        setOpen={setIsOpen}
        modalTitle="Submit Your Info"
        asForm
        formSubmit={handleSubmit}
      >
        <label>
          Name: <input type="text" required />
        </label>
        <button type="submit">Submit</button>
      </SmoothModal>
    </div>
  );
};

export default App;

Example: Using children as a Function

This example demonstrates how to use a function as the children prop. The function provides a ref that can be attached to the modal's content for custom DOM access or integration with external libraries.

import React, { useState, useEffect } from "react";
import { SmoothModal } from "smooth-joy-modal";

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

  useEffect(() => {
    if (isOpen) {
      console.log("Modal opened");
    }
  }, [isOpen]);

  return (
    <div>
      <button onClick={() => setIsOpen(true)}>Open Modal</button>
      <SmoothModal
        open={isOpen}
        setOpen={setIsOpen}
        modalTitle="Modal with Custom Ref"
      >
        {({ ref }) => (
          <div ref={ref} style={{ padding: "20px" }}>
            <p>This is the modal content!</p>
            <p>
              The `ref` is attached to this div, enabling direct DOM access if
              needed.
            </p>
            <button onClick={() => setIsOpen(false)}>Close Modal</button>
          </div>
        )}
      </SmoothModal>
    </div>
  );
};

export default App;

When to Use This Approach

Use a function as children if you need:

• Direct DOM access for advanced customizations.
• Integration with libraries that manipulate the DOM directly (e.g., animation libraries like GSAP).
• Dynamic behaviors depending on the rendered content.

Features

• Smooth Transitions: Powered by react-transition-group, with customizable styles for entering and exiting states.
• Flexible Content: Accepts children as ReactNode or a render function.
• Modal as Form: Easily configure the modal to act as a form with built-in submission handling.
• Custom Close Behavior: Define which closing reasons (backdropClick, escapeKeyDown, closeClick) should be ignored.

Development

To build or test the library locally:

npm install
npm run build

License

This project is licensed under the terms of the KSL License.