Tg-modal NPM | npm.io

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