tg-modal

Introduction

tg-modal is a react component for Modals. It aims to provide a standalone Modal without the need of adding a big UI library to your dependencies.

Installation

npm install tg-modal

Import

import Modal from 'tg-modal';

Styles

To get the actual modal working (it might be invisible without styles), one should import default styles to your own assets. The default styles are available as:

CSS: node_modules/dist/default.css SCSS: tg-modal/dist/default.scss

Custom styles

To use your own styles, the current recommendation is importing the default styles, and customizing them.

Usage

Assuming you have included the style-sheet, you can render a simple modal like this:

// Import the modal
import Modal from 'tg-modal';

<Modal isOpen={true} title="First modal" isStatic>
    Modal body...
</Modal>

This will render a static modal, which cannot be hidden by the user.

PropTypes

Modal

| Property | Type | Description |---------------------|--------|------------ | onCancel | func | Called when the user cancels the modal (Close button, backdrop click or ESC pressed). function (event, keyboard) {} | onConfirm | func | Called after confirming the modal (Currently only by pressing ENTER) function () {} | | isOpen | bool | Should the modal be visible | title | node | When set, Modal will render this as child of Modal.Header element. | isStatic | bool | Is the modal Static (backdrop click won't trigger onCancel) | isBasic | bool | Is the modal Basic (backdrop only, best for confirms) | keyboard | bool? | Should the modal listen to keyboard events (ENTER or ESCAPE press) [default: isOpen] | autoWrap | bool | If true, children will be wrapped inside Modal.Body [default: false] | onToggle | func | Function called after the modal is toggled. function (isOpen, props) { } | transitionName | string | Name of animation to use for open/close (to see how to define custom ones, see default styles) [default: tg-modal-fade] | transitionDuration | int | Duration of the transition in milliseconds [default: 300] | className | string | Extra classnames to use for modal [default: ] | dialogClassName | string | Classname to use for `ModalDialog` [default: tg-modal-dialog] | wrapperClassName | string | Extra classnames to use for modal wrapper [default: ]

Props not specified here are considered internal, and are prone to change.

Modal.Header

| Property | Type | Description |---------------------|-------------|-------------- | children | node | Contents | className | string | Class name to add to the wrapper div [default: tg-modal-header] | isStatic | bool | If true, the close button won't trigger onCancel | addClose | bool | Show the close button [default: true] | onCancel | func | Callback to trigger when the close button is clicked

Modal.Body

| Property | Type | Description |---------------------|-------------|-------------------------------- | children | node | Contents | className | string | Class name to add to the wrapper div [default: tg-modal-body]

Examples

Examples are available here.

Troubleshooting

If you encounter a problem, please file an issue.

License

MIT © Thorgate