@heritsilavo/modal

A flexible, animated modal component for React and Next.js applications with TypeScript support and GSAP animations.

✨ Features

• Multiple animation types (elastic, smooth, fade)
• Fully customizable content and styling
• Responsive design
• Built with TypeScript
• GSAP-powered animations
• Support for both React and Next.js
• Context-based API for easy modal management

📥 Installation

npm install @heritsilavo/modal gsap
# or
yarn add @heritsilavo/modal gsap

🚀 Basic Usage

1. Wrap your application with the ModalProvider

import ModalComponent from "@heritsilavo/modal";

function App() {
  return (
    <ModalComponent>
      <YourAppContent />
    </ModalComponent>
  );
}

2. Use the modal in any component

import { useModal } from "@heritsilavo/modal";

function MyComponent() {
  const { setModal } = useModal();

  const openModal = () => {
    setModal({
      open: true,
      content: <div>Your custom content here</div>,
      header: "My Modal Title",
      onConfirm: () => console.log("Confirmed!"),
      animationType: "elastic" // 'elastic' | 'smooth' | 'fade'
    });
  };

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

🔧 Props Configuration

The setModal function accepts these properties:

| Prop | Type | Default | Description | |-----------------------------|---------------------------|-------------|-------------| | open | boolean | false | Controls modal visibility | | content | React.ReactNode | null | Modal content | | header | string | undefined | Modal header text | | btnsLabel | { cancel: string, confirm: string } | undefined | Custom button labels | | onConfirm | () => any | undefined | Confirm button callback | | onClose | () => any | undefined | Callback when modal closes | | noHeader | boolean | false | Hide header | | noFooter | boolean | false | Hide footer buttons | | modalContainerClassname | string | undefined | Additional class for modal container | | modalContentClassname | string | undefined | Additional class for modal content | | confirmBtnDisableByDefault| boolean | false | Disable confirm button by default | | confirmBtnDisabled | boolean | false | Control confirm button disabled state | | animationType | "elastic" | "smooth" | "fade" | "elastic" | Animation style |

🎨 Custom Styling

The component comes with basic styling, but you can override it with your own CSS. The component structure follows these class names:

See default css code here

.modal-transparent-background {
  /* Overlay styles */
}

.modal-container {
  /* Main modal container */
}

.modal-header {
  /* Header section */
}

.modal-content {
  /* Content area */
}

.modal-footer {
  /* Footer with buttons */
}

.modal-btn {
  /* Base button styles */
}

.modal-btn-cancel {
  /* Cancel button */
}

.modal-btn-confirm {
  /* Confirm button */
}

.btn-disable {
  /* Disabled button state */
}

🌟 Animation Types

1. elastic: Bouncy, playful animation (default)
2. smooth: Smooth slide-up animation
3. fade: Simple fade in/out

setModal({
  open: true,
  content: <div>Choose your animation!</div>,
  animationType: "smooth" // Try changing this
});

⚠️ Requirements

This package requires:

• React 18+
• GSAP 3.12+
• For Next.js projects: Next.js 13+

📦 Package Structure

The package provides two entry points:

1. React: import ModalComponent from "@heritsilavo/modal"
2. Next.js: import ModalComponent from "@heritsilavo/modal/next"

🤝 Contributing

Contributions are welcome! Please open an issue or PR on the GitHub repository.

📄 License

ISC © Heritsilavo