novtiq-modal

novtiq-modal is a highly customizable modal library built with React and designed to work seamlessly with Tailwind CSS. It offers features such as animation support, scroll locking, keyboard closing, and position options.

📚 View Interactive Documentation & Examples ⭐ You can leave us a star on GitHub

Installation

Before starting, ensure you have Node.js and npm installed. Then, install the library by running:

npm install novtiq-modal

Also, make sure Tailwind CSS is set up in your project.

In the tailwind.config.js file, add the following to enable dark mode:

module.exports = {
  darkMode: "class", // Enable dark mode support
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Basic Usage

First, import the Modal component and use it in your project. Ensure Tailwind CSS is included in your project to fully leverage the modal's functionality.

import { useState } from "react";
import { Modal } from "novtiq-modal";
import "novtiq-modal/dist/novtiq-modal.css";

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

  return (
    <div>
      <button
        className="px-4 py-2 bg-blue-500 text-white rounded"
        onClick={() => setIsOpen(true)}
      >
        Open Modal
      </button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        size="lg"
        position="center"
        showCloseButton={true}
        hasOverlay={true}
        overlay="dark"
        closeOnOverlayClick={true}
        closeOnEsc={true}
      >
        <p className="text-gray-800">This is the modal content.</p>
      </Modal>
    </div>
  );
};

export default App;

Available Props

Main Properties

| Prop | Type | Description | Default Value | | --------------------- | ------------------------------------------------------------------- | ------------------------------------------------ | ------------- | | isOpen | boolean | Controls whether the modal is open or closed. | false | | onClose | () => void | Function executed when the modal is closed. | undefined | | title | string | Title displayed in the modal header. | undefined | | children | React.ReactNode | Content rendered inside the modal. | undefined | | className | string | Additional classes to customize the modal style. | undefined | | size | "sm" \| "md" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "full" | Modal size. | "md" | | position | "top" \| "center" \| "bottom" | Vertical position of the modal. | "center" | | showCloseButton | boolean | Shows the close button in the modal header. | true | | hasOverlay | boolean | Displays an overlay behind the modal. | true | | overlay | "default" \| "dark" \| "light" \| "none" | Overlay style. | "default" | | closeOnOverlayClick | boolean | Closes the modal when clicking on the overlay. | true | | closeOnEsc | boolean | Closes the modal when pressing the Escape key. | true |

size Prop

The size prop controls the width of the modal. Available options include:

• sm - Small size (e.g., max-w-sm)
• md - Medium size (e.g., max-w-md)
• lg - Large size (e.g., max-w-lg)
• xl - Extra-large size (e.g., max-w-xl)
• 2xl - Double extra-large size (e.g., max-w-[800px])
• 3xl - Triple extra-large size (e.g., max-w-[900px])
• 4xl - Quadruple extra-large size (e.g., max-w-[80%])
• full - Full-width size (e.g., max-w-full)

Advanced Example

You can customize the modal's behavior according to your needs:

import { useState } from "react";
import { Modal } from "novtiq-modal";
import "novtiq-modal/dist/novtiq-modal.css";

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

  return (
    <div>
      <button
        className="px-4 py-2 bg-green-500 text-white rounded"
        onClick={() => setIsOpen(true)}
      >
        Open Advanced Modal
      </button>

      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Advanced Modal"
        size="xl"
        position="bottom"
        hasOverlay={true}
        overlay="dark"
        closeOnOverlayClick={false}
      >
        <p className="text-gray-800">This modal has advanced configurations.</p>
      </Modal>
    </div>
  );
};

export default AdvancedModalExample;

Styling

The modal's design is optimized for Tailwind CSS. You can easily customize the CSS classes using the className property or by extending Tailwind's configurations.

Notes

• This component requires your project to support Tailwind CSS animations.
• Adding darkMode: "class" to your tailwind.config.js file is mandatory for proper dark mode functionality.

Thank you for using novtiq-modal! If you encounter any issues or have suggestions, feel free to open an issue in our repository.