项目作者: Achaak

项目描述 :
This module allows to integrate a modals simply and customize in your react app.
高级语言: JavaScript
项目地址: git://github.com/Achaak/react-modal-customizable.git
创建时间: 2020-02-09T14:37:01Z
项目社区:https://github.com/Achaak/react-modal-customizable

开源协议:MIT License

下载


react-modal-customizable

This module allows to integrate a modals simply and customize in your react app.

Table of Contents

Installation

To install, you can use npm or yarn:

  1. $ npm install react-modal-customizable
  2. $ yarn add react-modal-customizable

Examples

  1. import React from 'react';
  2. import Modal from 'react-modal-customizable'
  3. class Exemple extends React.Component {
  4. render() {
  5. return (
  6. <div className="development-screen screen">
  7. <Modal
  8. ref={(modal) => this.modal = modal}
  9. styleOverlay={{
  10. backgroundColor: "black"
  11. }}
  12. styleContent={{
  13. backgroudColor: "green"
  14. }}
  15. closeButton={true}
  16. title="Your title"
  17. >
  18. <div>Your content</div>
  19. </Modal>
  20. <button
  21. onClick={ () => this.modal.showModal() }
  22. >
  23. Show the modal
  24. </button>
  25. </div>
  26. )
  27. };
  28. }
  29. export default Example;

Props

General

Props Description Type Default
title Use to set a title in the modal String null
closeButton Use to show or hide the close button Boolean true
hideClickOutside Use to hide the modal if you click outside Boolean false

Buttons

Props Description Type Default
buttons Use to set multiple button. Array []

Exemple :

  1. <Modal
  2. buttons={
  3. [
  4. ...
  5. {
  6. value: "Delete",
  7. onClick: yourFunction,
  8. style: {
  9. fontSize: "2rem"
  10. },
  11. type: "primary"
  12. }
  13. ...
  14. ]
  15. }
  16. ></Modal>

Parameters of the buttons

Props Description Type Default
value Text in the button. String null
onClick Action of the click. Function null
style Style of the button. Object {}
type Type of the button.
(“primary”, “secondary”, “success”, “danger”, “warning”, “info”, “light”, “dark”, “link”)
String “default”

Style

Props Description Type Default
styleContainer Use to change the style of the container Object {}
styleOverlay Use to change the style of the overlay Object {}
styleContent Use to change the style of the content Object {}
styleTitle Use to change the style of the title Object {}
styleCloseButton Use to change the style of the close button Object {}

Callbacks

Props Description Type Default
onShow Callback fired after show the modal. Function null
onHide Callback fired hide show the modal. Function null

Functions

showModal()

Use to show the modal.

  1. this.modal.showModal()

hideModal()

  1. this.modal.hideModal()

License

MIT