Important information about this package

This package is meant to be used for educational purpose. It is not intended to be maintained and could be deleted in the future.

About this package

It's a simple, lightweight, and customizable modal component for React. It is built using Storybook and fortawesome as dependencies.

-> Storybook allows us to isolate the package from the business logic and context of our application.

-> Fortawesome is a package developed by Font Awesome and provides an easy way to use icons in our component.

Installation

To install this package, type

 npm install @lokkotara/custom-modal

Usage

First, import the component with

import { Modal } from "@lokkotara/custom-modal";

Then, you can use it like this :

import React,{ useState } from "react";
import { Modal } from "@lokkotara/custom-modal";

const SomeComponent = () => {

  const [isModal, setIsModal] = useState(false);

  const customModalBody = (
    <span>An interesting text</span>
  );

  return (
    <div>
      <Modal
        closeButton={false} // Display the close button
        closeButtonStyle={{color: purple}} // Style for the close button
        icon="success" // The icon to display
        iconStyle={{color: purple}} // Style for the icon
        isOpen={isModal} // Whether the modal is open or closed
        message={customModalBody} //The content inside the body of the modal
        messageStyle={{fontSize: 1.2rem}} //Style applied to the message
        modalContainerStyle={{ backgroundColor: "rgba(164, 137, 178, 0.9)" }} // Style applied to the container behind the modal
        modalStyle={{backgroundColor: #f1f2f3, maxWidth: 500px, minHeight: 250px}} // Style for the modal window
        modalMode={true} // If true, it can't be closed by clicking on the background behind the modal
        onClose={() => setIsModal(false)} // Called when the modal is closed
        title="An awesome title" // The title of the modal
        titleStyle={{color: grey, fontSize: 1.5rem}} // Style applied to the title
      />
    </div>
  )
};

PropTypes

There is a couple of props that we can pass to our component to customise its appearance. Below is an explanation of what we can do :

| Name | Type | Required | Example | | :--------------: | :----------------: | :------: | :--------------: | | closeButton | void or Boolean | no | Nothing if you want the close button and closeButton={false} if you want to remove it | | closeButtonStyle | void or Object | no | closeButtonStyle={{color: purple, fontSize: 1.5rem}} | | icon | void or String | no | Nothing if you don't want any icon. Else, one of these : success, error, info, danger | | iconStyle | void or Object | no | Icons have a size and their own color by default. However, you can change it by passing an object of properties iconStyle={{color: purple, fontSize: 1.5rem}} | | isOpen | Boolean | yes | isOpen should be linked to a useState with false as default value ans set to true to open the modal | | message | String/JSX.element | yes | message="My first message" or an element like message={<span>My first message in a span</span>} | | messageStyle | void or Object | no | messageStyle={{fontSize: 1.2rem, color:grey, fontWeight: bold}} | | | modalStyle | void or Object | no | modalStyle={{backgroundColor: #f1f2f3, maxWidth: 500px, minHeight: 250px}} | | modalMode | void or Boolean | no | Nothing if you want to close by clicking outside. Else modalMode={true} | | onClose | Function | yes | Should set the useState to false like this : onClose={() => setIsModal(false)} | | title | void or String | no | title="An awesome title" | | titleStyle | void or Object | no | titleStyle={{color: grey, fontSize: 1.5rem}} |

Examples

Here are a few screenshots of what we can do with customisation :

| Type | Example | | :--------------: | :----------------: | | Success message | | | Error message | | | Info message | | | Danger message | | | Long message | | | Custom modal colors | | | Custom background color | |