Rock Modal

A lightweight, customizable, and animated modal component for React that supports slide-in and slide-out effects, custom positions, and easy integration.

Features

• Slide-in/slide-out effects: Supports slideInLeft, slideInRight, slideOutLeft, slideOutRight.
• Custom positions: You can position the modal to the left, right, or center.
• Color customization: Change the background color using predefined color names.
• Responsive: Easily adjust the modal width based on percentage or custom values.
• Close functionality: Close the modal by clicking outside or using the close button.

Installation

To install the rockmodal library, run the following command:

npm install rockmodal

This package would need sass, so after install rockmodal, please install sass by following this command

npm install sass

Usage

Importing the RockModal Component First, import the RockModal component from the rockmodal library:

import { RockModal } from "rockmodal";

Example Usage

Parent Code

import React, { useState } from "react";
import AddModal from "./pages/AddModal";

const App = () => {
  const [addModal, setAddModal] = useState(false);


  return (
    <div className="container mx-auto p-5">
      <div className="flex justify-between mb-3">
        <h1 className="text-3xl font-bold text-center text-gray-800">
          Table Data
        </h1>
        <button
          onClick={() => setAddModal(true)}
          className="bg-blue-500 hover:bg-blue-700 duration-300 text-white font-bold py-1 px-2 rounded"
        >
          Add
        </button>
      </div>
      <AddModal isOpen={addModal} onClose={() => setAddModal(false)} />
    </div>
  );
};

export default App;

Modal Code

import React from "react";
import RockModal from "../components/RockModal/RockModal";

const AddModal = ({ isOpen, onClose }) => {
  return (
    <RockModal
      isOpen={isOpen}
      onClose={onClose}
      effect="slideInRight"
      color="cyan"
      width="30"
      position="right"
    >
      <div className="flex justify-between p-4 min-h-screen">
        <h1 className="text-2xl font-semibold text-base">Choose Payment</h1>
      </div>
    </RockModal>
  );
};

export default AddModal;

Props

| Prop Name | Type | Description | Required | Default | | ---------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------ | -------- | -------- | | isOpen | Boolean | Controls the visibility of the modal. When set to true, the modal will appear. | Yes | false | | onClose | Function | A callback function that is triggered when the modal is closed. | Yes | null | | effect | String | Defines the animation effect for the modal. Available values are: slideInLeft slideInRight slideOutLeft slideOutRight. | Yes | center | | color | String | Background color of the modal. You can use standard color names or hex values. | No | white | | width | string | Width of the modal, defined in percentage (%). | No | 80% | | position | String | Position of the modal. Available values: left, right, center. If no value is provided, defaults to center. | No | center |

Color Lists

The color prop supports predefined named colors from the colorMap or any valid CSS color value. Below are the available color options in the colorMap:

| Color Name | RGB Code | | ---------- | ------------------ | | blue | rgb(0, 0, 255) | | red | rgb(255, 0, 0) | | green | rgb(0, 255, 0) | | yellow | rgb(255, 255, 0) | | orange | rgb(255, 165, 0) | | purple | rgb(128, 0, 128) | | pink | rgb(255, 192, 203) | | brown | rgb(165, 42, 42) | | grey | rgb(128, 128, 128) | | black | rgb(0, 0, 0) | | white | rgb(255, 255, 255) | | cyan | rgb(0, 255, 255) | | magenta | rgb(255, 0, 255) | | lime | rgb(0, 255, 0) | | maroon | rgb(128, 0, 0) | | navy | rgb(0, 0, 128) | | olive | rgb(128, 128, 0) | | teal | rgb(0, 128, 128) | | coral | rgb(255, 127, 80) | | salmon | rgb(250, 128, 114) | | khaki | rgb(240, 230, 140) | | gold | rgb(184, 134, 11) | | silver | rgb(192, 192, 192) | | crimson | rgb(220, 20, 60) | | indigo | rgb(75, 0, 130) | | violet | rgb(238, 130, 238) | | plum | rgb(221, 160, 221) | | beige | rgb(245, 245, 220) | | lavender | rgb(230, 230, 250) | | mint | rgb(189, 252, 201) |

there are lists of transparent color too, you just need to add Transparent after listed color e.g: blueTransparent, violetTransparent etc.