kunkanya-modal-library-react v0.1.0

remmer-react-modal-library This project is to create a modal library for react app project. You can freely install it and use it in to your project. The styles of modal can be customized as you wish.

Table of contents

1. How to install
2. How to use
3. Modal properties
4. Example

1. How to install

$ npm install kunkanya-modal-react-library

2. How to use

Simply import Modal modul on the top of your project whereas it needs.

import { Modal } from 'kunkanya-modal-react-library'

3. Modal properties

The following are the properties of the modal that can be customised.

*node can be string, number , array or elements.

4. Example

4.1 Defaut style modal.

if you do not wish to change the style od the modal. You can just update your text in modalBodyContent and buttonContent for optional properties. Then the modal is ready to use.

4.2 Customized modal

You can freely customized your modal as you wish like below colorful example!

import React, { useState } from 'react';
import './App.css';
import logo from './asset/logo.png'

import Modal from 'r2-react-modal-library/dist/components/Modal';


function Home() {
    const [isShow, setIsShow] = useState(false)
    const showModal = () => {
        setIsShow(true)
    }
    return (
        <div>
            <button onClick={showModal}>
                ShowModal
            </button>
            {isShow ?
                <Modal
                    show={isShow}
                    onCloseFunction={() => { setIsShow(false) }}
                    styleModalWrapper={{ backgroundColor: "pink" }}
                    styleModalContainer={{
                        backgroundColor: "yellow",
                        border: "5px solid green"
                    }}
                    styleModalHeader={{
                        color: "orange",
                        fontSize: "36px",
                        borderBottom: "1px solid gray "
                    }}
                    styleModalBody={{
                        color: "blue",
                        fontSize: "24px",
                        fontWeight: "Bold"
                    }}
                    styleButton={{
                        backgroundColor: "red",
                        fontSize: "20px",
                        fontWeight: "Bold"
                    }}
                    modalHeaderContent={
                        <img style={{ width: '50px', height: '50px' }} src={logo} alt="logo" />
                    }
                    modalBodyContent="MODAL BODY's CONTENT"

                    buttonContent="Button Content as you wish"

                />
                : ""
            }

        </div>
    )

}

export default Home;