Modal components are used to enable users to display messages or forms without leaving the page.
import { PModal } from 'pearkit';A simple modal component wrapped into an POverlay component.
const [modalStatus,setModalStatus] = useState(false);
<PButton onClick={() => setModalStatus(true)}>Open Basic Modal</PButton>
<PModal
modalTitle="Lorem Ipsum Modal"
status={modalStatus}
close={() => setModalStatus(false)}
>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi, sequi.</p>
</PModal>None
Here you can see all the working features for the modal component.
| Name | Type | Default | Description |
|---|---|---|---|
| modalHeader | ReactNode | null | Override header of the component. |
| status | boolean | false | Status state of the component |
| closable | boolean | true | Closable state of the component |
| modalTitle | string | null | Modal Title of the component |
| overlayColor | TwColor | Tailwind color names union + 'white' and 'black' name support | black | Change overlay colors of the component |
| size | string | small | default | large | full | default | Size of the component |
| close | function | void | Close method of the component |