Modal - Keep React

A modal component is a user interface element commonly used in web and mobile applications to display focused content or interactions that temporarily overlay the main screen. Modal components typically appear as a small window or dialog box that appears on top of the existing content, effectively blocking interaction with the underlying interface until the modal is dismissed.

Modal components typically appear as a small window or dialog box that appears on top of the existing content, effectively "blocking" interaction with the underlying interface until the modal is dismissed.

Modal help to maintain context and prevent users from navigating away or performing other actions while the modal is active. Modals can be closed by clicking an overlay area outside the modal, pressing an "X" or "Close" button, or completing a specific action within the modal content.

A "History Modal" seems to be a component or feature that captures and displays a user's historical interactions or actions within a web application. This type of modal could serve as a summary or log of a user's past activities, possibly including login details and other information saved on the browser.

These positioning options ensure that the modal is displayed in a way that best suits your layout and user experience. The available positions for the modal are: bottom-left, bottom-right, bottom-center, top-left, top-center, top-right, center-left, center, and center-right. You can select the appropriate position to align the modal with your design intentions and provide a comfortable viewing experience for your users.

These sizes offer flexibility when designing your modals, ensuring they align with your overall design while maintaining consistency across different parts of your application. Here is all available sizes for the modal: sm md lg xl 2xl 3xl 4xl 5xl 6xl and 7xl

API Reference#

Explore the available props for the modal component

Property	Description	Type	Default
onClose	Function to be called when the modal is closed.	function	()=>void
show	Controls the visibility of the modal.	boolean	false
icon	Optional icon to be displayed within the modal.	ReactNode	ReactNode
size	Defines the size of the modal.	sm md lg xl 2xl 3xl 4xl 5xl 6xl 7xl	sm
position	Determines the position of the modal on the screen.	bottom top left right center	center

Modal - Keep React

Table of Contents#

Default Modal#

Confirmation Modal#

History Modal#

All The Position of Modal#

All The Size of Modal#

API Reference#