success, // BOOLEAN - for appear or not the success window
  successMessage, // STRING - message success
  error, //BOOLEAN - for appear or not the error window
  errorMessage, // STRING - message error
  warning, // BOOLEAN - for appear or not the warning window
  warningMessage, // STRING - message warning
  info, // BOOLEAN - for appear or not the info window
  infoMessage, // STRING - message info
  // GLOBAL MODAL STYLES PROPS
  overlay, // BOOLEAN - if you want overlay effect or not
  little, // predefined values - the default size of the alert is divided by 2
  medium, // predefined values - the default size of the alert is divided by 1/3
  autoClose, // NUMBER - time in ms for auto closes alert when you don't have button
  customStyleColor, // HEX, rgba, hsl, gradient, etc... - Background color value for modal
  titleText, // STRING - title for each alert
  colorTitle, // HEX, rgba, hsl, etc... - color value for title text
  messageColor, // HEX, rgba, hsl, gradient, etc... - color value for message text
  withButton, // BOOLEAN - value for appear or desappear the button window
  buttonText, // STRING - button content
  colorTextButton, // HEX, rgba, hsl, etc... - color value for button text
  buttonBackground, // HEX, rgba, hsl, gradient, etc... - Background color value for button
  alertImg, // IMAGE (svg, png, jpg...) - for replace all default emoji by your own pictures.

import { useState } from "react";
import CustomAlertComponent from "./components/customAlert/CustomAlertComponent";
import Me from "./assets/perso.png";

const ExampleComponent = () => {
   const [displaySuccess, setDisplaySuccess] = useState(false);

     // This function display the success alert
  const handleClickSuccess = () => {
    setDisplaySuccess(true);
    // Your code here
  };

   // Component with Custom alert success
  const SuccessAlert = () => (
    <CustomAlertComponent
      success
      successMessage="yay, everything is working."
      // If you want normal size alert modal remove this line below.
      medium
      // If you dont want custom picture, remove this line below. the default emoji will be chosed.
      alertImg={Me}
      // If you dont want custom background color, just remove this line below, the default color will be chosed.
      customStyleColor="#ef8f9e" // Background value for the modal (ex: HEX, rgba, hsl, gradient, etc...)
      // if you don't want overlay effect remove this line below
      overlay
      // If you dont want button, just remove this two lines below.
      withButton
      buttonText="Great, it's cool!"
    />
  );

  return (
    <div>
      {displaySuccess && (
        <div className="slide-in-top">
          <SuccessAlert />
        </div>
      )}
      <div className="button-container">
        <button className="button-boxApp" onClick={handleClickSuccess}>
          Success Alert
        </button>
      </div>
    </div>
  )
};

export default ExampleComponent;

import { useState } from "react";
import CustomAlertComponent from "./components/customAlert/CustomAlertComponent";

const ExampleComponent = () => {
   const [displayInfo, setDisplayInfo] = useState(false);

     // This function display the Info alert
  const handleClickInfo = () => {
    setDisplayInfo(true);
  };

  // Component with Custom alert info
  const InfoAlert = () => (
    <CustomAlertComponent
      info
      infoMessage="info! be read carefully."
      little
      // If you dont want custom background color, just remove this line below, the default gradient color will be choosed.
      customStyleColor="rgba(255, 255,255, 0.7)" // Background value for the modal (ex: HEX, rgba, hsl, gradient, etc...)
      // if you don't want overlay effect remove this line below
      overlay
      // If you dont want button, remove this line below.
      withButton
      // If you dont write buttonText props, the default text is choosed.
    />
  );

  return (
    <div>
      {displayInfo && (
        <div className="slide-in-top">
          <InfoAlert />
        </div>
      )}
      <div className="button-container">
        <button className="button-boxApp" onClick={handleClickInfo}>
          Info Alert
        </button>
      </div>
    </div>
  )
};

export default ExampleComponent;

import { useState } from "react";
import CustomAlertComponent from "./components/customAlert/CustomAlertComponent";

const ExampleComponent = () => {
   const [displayWarning, setDisplayWarning] = useState(false);

     // This function display the warning alert
  const handleClickWarning = () => {
    setDisplayWarning(true);
  };

  // Component with Custom alert warning
  const WarningAlert = () => (
    <CustomAlertComponent
      warning
      warningMessage="Be careful what you ask for, you might end up with this!"
      // If you dont write messageColor props, the default color is chosed.
      messageColor="#fff"
      // If you dont want custom background color, just remove this line below, the default color will be chosed.
      customStyleColor="hsl(351, 75%, 75%)" // Background value for the modal (ex: HEX, rgba, hsl, gradient, etc...)
      // if you don't want overlay effect remove this line below
      overlay
      // If you dont want custom timeout, remove this line below (the default value is 4000ms).
      autoClose={5000}
    />
  );

  return (
    <div>
      {displayWarning && (
        <div className="bounce-in-top">
          <WarningAlert />
        </div>
      )}
      <div className="button-container">
        <button className="button-boxApp" onClick={handleClickWarning}>
          Warning Alert
        </button>
      </div>
    </div>
  )
};

export default ExampleComponent;

import { useState } from "react";
import CustomAlertComponent from "./components/customAlert/CustomAlertComponent";

const ExampleComponent = () => {
   const [displayError, setDisplayError] = useState(false);

     // This function display the Error alert
  const handleClickError = () => {
    setDisplayError(true);
  };

  // Component with Custom alert Error
  const ErrorAlert = () => (
    <CustomAlertComponent
      error
      // If you dont write title props, the default text is chosed.
      title="OUPS, Not working..."
      // If you dont write colorTitle props, the default color is chosed.
      colorTitle="#000"
      errorMessage="oh no, something went wrong."
      // If you dont want custom background color, just remove this line below, the default color will be chosed.
      customStyleColor="red" // Background value for the modal (ex: HEX, rgba, hsl, gradient, etc...)
      // if you don't want overlay effect remove this line below
      overlay
      // If you dont want button, just remove this two lines below.
      withButton
      buttonText="No worry, try again!"
    />
  );

  return (
    <div>
      {displayError && (
        <div className="bounce-in-top">
          <ErrorAlert />
        </div>
      )}
      <div className="button-container">
         <button className="button-boxApp" onClick={handleClickError}>
          Error Alert
        </button>
      </div>
    </div>
  )
};

export default ExampleComponent;