1.0.2 • Published 5 years ago
@toffysoft/react-simple-modal v1.0.2
react-simple-modal
Simple modal component for React.
Install
npm install --save react-simple-modalUsage
import React, { Component } from "react";
import Modal, {
DEFAULT,
TOP,
BOTTOM,
LEFT,
RIGHT,
SCALE_DOWN,
VERTICAL_FLIP,
HORIZONTAL_FLIP,
ROTATE,
TINY,
DARK,
LIGHT
} from "@toffysoft/react-simple-modal";
class Example extends Component {
render() {
const { isActive } = this.state;
return (
<Modal
backdropColor={LIGHT}
animate={ROTATE}
onBackdropClick={handleClose}
onCloseButtonClick={handleClose}
open={isActive}
>
...
</Modal>
);
}
}Props
Modal
| Name | Type | Default | Description |
|---|---|---|---|
| onBackdropClick | func | null | Callback fired when the backdrop is clicked. |
| backdropColor | dark || light || custom-color(linear-gradient(-180deg, #ff1c68 0%, #9f0092 98%)) | dark | Backdrop color. |
| backdrop | bool | true | Show or hide backdrop. |
| closeButton | bool || default || tiny | default | Show or hide close button and specified style of button. |
| onCloseButtonClick | func | null | Callback fired when the close button is clicked. |
| open* | bool | Control if the modal is open or not. | |
| children | node | null | The content of the modal. |
| width | number |or| string | null | Modal width. |
| height | number |or| string | null | Modal height. |
| animate | default(scale) || top || bottom || left || right || scale-down || vertical(flip) || horizontal(flip) || rotate | default(scale) | Animation type. |
License
MIT © toffysoft