Skip to content

Instantly share code, notes, and snippets.

@thulioph
Last active Sep 20, 2018
Embed
What would you like to do?
An example to demonstrate a Modal component using Reactstrap
import React from "react";
import PropTypes from "prop-types";
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";
export const ModalComponent = ({
showModal,
onHandleModal,
onBtnSuccess,
onBtnCancel,
mainBtnLabel,
modalTitle,
modalBody,
successBtnLabel,
cancelBtnLabel
}) => (
<div>
<Button color="danger" onClick={onHandleModal}>
{mainBtnLabel}
</Button>
<Modal isOpen={showModal} toggle={onHandleModal}>
<ModalHeader toggle={onHandleModal}>{modalTitle}</ModalHeader>
<ModalBody>{modalBody}</ModalBody>
<ModalFooter>
<Button color="primary" onClick={onBtnSuccess}>
{successBtnLabel}
</Button>{" "}
<Button color="secondary" onClick={onBtnCancel}>
{cancelBtnLabel}
</Button>
</ModalFooter>
</Modal>
</div>
);
ModalComponent.propTypes = {
mainBtnLabel: PropTypes.string,
modalTitle: PropTypes.string,
modalBody: PropTypes.string,
successBtnLabel: PropTypes.string,
cancelBtnLabel: PropTypes.string
};
ModalComponent.defaultProps = {
mainBtnLabel: "",
modalTitle: "",
modalBody: "",
successBtnLabel: "",
cancelBtnLabel: ""
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment