react-modal-customizable

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

Table of Contents

• Installation
• Examples
• Props
  • General
  • Buttons
  • Style
  • Callbacks
• Functions
  • showModal()
  • hideModal()
  • License

Installation

To install, you can use npm or yarn:

$ npm install react-modal-customizable
$ yarn add react-modal-customizable

Examples

import React from 'react';
import Modal from 'react-modal-customizable'

class Exemple extends React.Component {
    render() {
        return (
            <div className="development-screen screen">
                <Modal
                    ref={(modal) => this.modal = modal}
                    styleOverlay={{
                        backgroundColor: "black"
                    }}
                    styleContent={{
                        backgroudColor: "green"
                    }}
                    closeButton={true}
                    title="Your title"
                >
                    <div>Your content</div>
                </Modal>

                <button
                    onClick={ () => this.modal.showModal() }
                >
                    Show the modal
                </button>
            </div>
        )
    };
}

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 :

<Modal
    buttons={
        [
            ...
            {
                value: "Delete",
                onClick: yourFunction,
                style: {
                    fontSize: "2rem"
                },
                type: "primary" 
            }
            ...
        ]
    }
/>

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.

this.modal.showModal()

hideModal()

this.modal.hideModal()

License

MIT