UnpopularModal Documentation

The UnpopularModal component provides a customizable modal dialog box with various options to fit your needs. Below are examples of how to use the component in different scenarios.

Props

The UnpopularModal component accepts the following properties:

Property	Description
isOpen	Determines whether the modal is open or not.
onClose	A function that is called when the modal is closed.
title	The title of the modal.
children	The content of the modal.
size	The size of the modal.
position	The position of the modal.
backdropColor	The color of the modal backdrop.
titleColor	The color of the modal title.
buttonColor	The color of the modal button.
buttonTextColor	The color of the modal button text.
buttonOnClick	The function that is called when the modal button is clicked.
closeButton	Determines whether the close button is shown or not.
closeOnClickOutside	Determines whether the modal is closed when the user clicks outside the modal.
showbutton	Determines whether the button is shown or not.
buttonTitle	The title of the modal button.

Use Cases

1. Basic Modal


<UnpopularModal
  isOpen={isOpen} 
  onClose={toggleModal}
  title="Basic Modal"
  size="medium"
  backdropColor="rgba(0, 0, 0, 0.9)"
  showbutton={false}
>
This is a basic modal

</UnpopularModal>

2. Modal with Custom Colors

  
<UnpopularModal
   isOpen={isOpenCustom}
   onClose={() => setIsOpenCustom(false)}
   title="Custom Color Modal"
   size="large"
   backdropColor="rgba(0, 0, 0, 0.7)"
   titleColor="#444"
   contentColor="#aaa"
   buttonColor="#ff5722"
   buttonOnClick={() => setIsOpenCustom(false)}
   buttonTextColor="#fff"
>
   This modal has custom colors for the backdrop, title, content, and
   buttons.
</UnpopularModal>

3. Modal with Animation and Position

 
<UnpopularModal
 isOpen={isOpenAnimated}
 onClose={() => setIsOpenAnimated(false)}
 title="Animated Modal"
 size="small"
 position="top"
 animation="scale"
 backdropColor="rgba(0, 0, 0, 0.3)"
 buttonColor="#4caf50"
 buttonOnClick={() => setIsOpenAnimated(false)}
>
 This modal appears with a scale animation and is positioned at the top
 of the screen.
</UnpopularModal>

4. Modal with Custom Button


<UnpopularModal
  isOpen={isOpenCustomButton}
  onClose={() => setIsOpenCustomButton(false)}
  title="Custom Button Modal"
  size="medium"
  buttonColor="#ff5722"
  buttonTextColor="#fff"
  closeButton={false}
>
  This modal has a custom button color and hides the default close button.
</UnpopularModal>

5. Modal without Close Button


<UnpopularModal
  isOpen={isOpenNoCloseButton}
  onClose={() => setIsOpenNoCloseButton(false)}
  title="No Close Button Modal"
  size="medium"
  closeButton={false}
>
  This modal does not have a close button.
</UnpopularModal>

6. Modal Positioned at the Top


<UnpopularModal
  isOpen={isOpenTopPosition}
  onClose={() => setIsOpenTopPosition(false)}
  title="Top Positioned Modal"
  size="medium"
  position="top"
>
  This modal is positioned at the top of the screen.
</UnpopularModal>

7. Modal Positioned at the Bottom


<UnpopularModal
  isOpen={isOpenBottomPosition}
  onClose={() => setIsOpenBottomPosition(false)}
  title="Bottom Positioned Modal"
  size="medium"
  position="bottom"
>
  This modal is positioned at the bottom of the screen.
</UnpopularModal>

8. Modal with Close on Click Outside


<UnpopularModal
   isOpen={isOpenCloseOnClickOutside}
   onClose={() => setIsOpenCloseOnClickOutside(false)}
   title="Close on Click Outside Modal"
   size="medium"
   closeOnClickOutside={true}
>
   This modal closes when clicking outside of it.
</UnpopularModal>

Conclusion

The UnpopularModal component provides a versatile and stylish solution for creating modal components. Utilize its customization options to enhance user experience with elegant and functional toast messages in your React applications.