Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time



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.

NPM version Build Status Coverage Dependency Status Greenkeeper badge Downloads


npm install tg-modal


import Modal from 'tg-modal';


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.


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...

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



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.


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


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


Examples are available here.


If you encounter a problem, please file an issue.


MIT © Thorgate