Modal API
API documentation for the React Modal component. Learn about the available props.
Import
import { Modal } from 'repopup';
Props
| Props | Type | Description | Default |
|---|---|---|---|
| background | string | Popup window background (CSS background property). | '#ffffff' |
| cancelButtonText | string | Use this to change the text on the "Cancel"-button. | Cancel |
| childrenAfterDefaultContent | ReactNode | null | Use this to place children after default content of the popup | null |
| childrenBeforeDefaultContent | ReactNode | null | Use this to place children before default content of the popup | null |
| closeOnBackdropClick | boolean | Wheather or not to close the popup on clicking the backdrop | true |
| color | string | Color for title and content | '#000000' |
| confirmButtonText | string | Use this to change the text on the "Confirm"-button. | 'Confirm' |
| customClass | IModalCustomClassType; | A custom CSS class for the popup | {} |
| denyButtonText | string | Use this to change the text on the "Deny"-button. | 'Deny' |
| icon | success| error| info| warning| question| null | varinat of a icon to be shown | null |
| onCancel | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Cancel"-button. | () => {} |
| onConfirm | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Confirm"-button | () => {} |
| onDeny | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Deny"-button. | () => {} |
| onRequestClose | Function | Function that will be run when the modal is requested to be closed | required |
| onSuccess | React.MouseEventHandler<HTMLButtonElement> | undefined | Use this as a click handler for the "Success"-button. | () => {} |
| open | boolean | Boolean describing if the modal should be shown or not. | required |
| placement | 'top'| 'center' | 'bottom'| 'center-start'| 'bottom-start'| 'top-start'| 'top-end'| 'bottom-end'| 'center-end' | Use this to change Popup window position | center |
| showCancelButton | boolean | If set to true, a "Cancel"-button will be shown. | false |
| showConfirmButton | boolean | If set to true, a "Confirm"-button will be shown. | false |
| showDenyButton | boolean | If set to true, a "Deny"-button will be shown. | false |
| showSuccessButton | boolean | If set to true, a "Success"-button will be shown. | false |
| subtitle | string | Used for a description for the popup. | |
| successButtonText | string | Use this to change the text on the "Success"-button. | Ok |
| title | string | Used for the title of the popup |