Modal Component in React

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

How to install the Modal

You can find the npm package here.\

you can install it with the following code :

npm -i @8uk0w5k1/[email protected]

OR

yarn add @8uk0w5k1/[email protected]

import React, from 'react';
import Modal from '@8uk0w5k1/simple_modal';

const Exemple = () => {
  const [isOpen, setIsOpen] = useState(false);

  function openModal() {
    setIsOpen(true);
    //console.log('opened Modal');
  }

  return (
    <>
      {isOpen && (
        <Modal
          setIsOpen={setIsOpen}
          title='Parfait!'
          content='Votre employé à bien été ajouté à votre base de données, Félicitations! 😀'
        />
      )}
      <button
        className='bg-[#eae7b1] hover:bg-[#61876e] py-3 px-8 rounded-lg text-black border-b-4 border-[#3c6255] hover:border-[#3c6255] transition duration-300 cursor-pointer'
        onClick={openModal}>My Button</button>
    </>
  );
};

Props

What props can you add ?

Modal.defaultProps = { isOpen: false, handleClose: () => setIsOpen(false), iconSize: 24, iconColor: '#000', font: 'Arial, sans-serif', title: 'Modal title', content: 'your personal content', };

Don't forget to care about sensitive case !