@lokkotara/custom-modal NPM

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}}`