Custom Modal Component React

A styled modal component using the styled-components library. The component contains various styles for the different components.

Demo

Video Demo here

How to install

Clone this repository :

• You can find the github repository here.

npm install customized-modal-react

OR

yarn add  customized-modal-react   

import React, { Component } from 'react'
import Modal from 'customized-modal-react'

const Example = () => {

    const [isOpen, setIsOpen] = useState(false);
     const [darkMode, setDarkMode] = useState(false);

return(
    <>
    {isOpen && <Modal darkMode={true} setIsOpen={setIsOpen} close check={true}/>}
    <button onClick={() => setIsOpen(true)}>Open</button>

    </>
)
}

📌 Props

________________________________________________________________________-

How to change the colors ?

You have access to a large ColorsSchema palette that you can write as in Tailwind CSS.

The range goes from 50, 100, 200, ... up to 900 except for neutral

The colors are:

• neutral: neutral-000 is white, neutral 1000 is black
• green
• red
• blue
• yellow

For example, if you want to change the color of the close icon, you would add the props close to display the button and closeColor props to change the color like this:

<Modal close closeColor="red-500" />

You can change the icons size

You have access to a different sizes.

Here are the sizes:

• iconLarge: 3rem,
• iconBase: 2rem,
• header1: 1.8rem,
• header2: 1.6rem,
• header3: 1.4rem,
• header4: 1.2rem,
• header5: 1.1rem,
• paragraph: 1rem,
• helperText: 0.8rem,
• copyrightText: 0.7rem,

For example, if you want to change the size of the close icon, you would add the props close to display the icon and closeSize to change the size.

<Modal close closeSize="header3" />

✌️ License

MIT