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:

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

Or using Yarn:

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

---

Usage

1import React, { useState } from "react";
2import { SmoothModal } from "smooth-joy-modal";
3
4const App = () => {
5  const [isOpen, setIsOpen] = useState(false);
6
7  return (
8    <div>
9      <button onClick={() => setIsOpen(true)}>Open Modal</button>
10      <SmoothModal
11        open={isOpen}
12        setOpen={setIsOpen}
13        modalTitle="My Modal Title"
14      >
15        <p>Modal content goes here!</p>
16      </SmoothModal>
17    </div>
18  );
19};
20
21export 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

1import React, { useState } from "react";
2import { SmoothModal } from "smooth-joy-modal";
3
4const App = () => {
5  const [isOpen, setIsOpen] = useState(false);
6
7  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
8    event.preventDefault();
9    console.log("Form submitted!");
10    setIsOpen(false);
11  };
12
13  return (
14    <div>
15      <button onClick={() => setIsOpen(true)}>Open Form Modal</button>
16      <SmoothModal
17        open={isOpen}
18        setOpen={setIsOpen}
19        modalTitle="Submit Your Info"
20        asForm
21        formSubmit={handleSubmit}
22      >
23        <label>
24          Name: <input type="text" required />
25        </label>
26        <button type="submit">Submit</button>
27      </SmoothModal>
28    </div>
29  );
30};
31
32export 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.

1import React, { useState, useEffect } from "react";
2import { SmoothModal } from "smooth-joy-modal";
3
4const App = () => {
5  const [isOpen, setIsOpen] = useState(false);
6
7  useEffect(() => {
8    if (isOpen) {
9      console.log("Modal opened");
10    }
11  }, [isOpen]);
12
13  return (
14    <div>
15      <button onClick={() => setIsOpen(true)}>Open Modal</button>
16      <SmoothModal
17        open={isOpen}
18        setOpen={setIsOpen}
19        modalTitle="Modal with Custom Ref"
20      >
21        {({ ref }) => (
22          <div ref={ref} style={{ padding: "20px" }}>
23            <p>This is the modal content!</p>
24            <p>
25              The `ref` is attached to this div, enabling direct DOM access if
26              needed.
27            </p>
28            <button onClick={() => setIsOpen(false)}>Close Modal</button>
29          </div>
30        )}
31      </SmoothModal>
32    </div>
33  );
34};
35
36export 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:

1npm install
2npm run build

License

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