Smooth-joy-modal NPM

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.