@lokkotara/custom-modal

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