1.1.14 • Public • Published

Important information about this package

Version GitHub package.json dependency version (prod) GitHub package.json dependency version (dev dep on branch) GitHub package.json dependency version (prod) Documentation Maintenance GitHub last commit

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.


To install this package, type

 npm install @lokkotara/custom-modal


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 (
        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


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


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

Type Example
Success message Successful example
Error message error example
Info message info example
Danger message danger example
Long message long example
Custom modal colors custom colors example
Custom background color custom background example

Package Sidebar


npm i @lokkotara/custom-modal

Weekly Downloads






Unpacked Size

387 kB

Total Files


Last publish


  • lokkotara