@tourmalinecore/react-tc-modal

Tourmaline Core react modal component

Modal dialog component for React.JS

Demo

Instalation

The package can be installed via npm:

npm install @tourmalinecore/react-tc-modal --save

Or via yarn:

yarn add @tourmalinecore/react-tc-modal

Do not forget to import styles if you want to use the default styling.

should be imported once in your root component

import '@tourmalinecore/react-tc-modal/es/index.css';
import '@tourmalinecore/react-tc-ui-kit/es/index.css';

NOTE: You may want to re-style on your own. In that case you don't have to import the styles.

Examples

Simple Message:

import React from 'react';
import { Modal } from '@tourmalinecore/react-tc-modal';

function MessageModal({}){
  return (
    <Modal
      title="Important message!"
      content="You are now reading an important message."
      showApply={false}
      onCancel={false}
    />
  );
}

Confimation:

function ConfimationModal({onConfirm, onCancel, onClose}){
  return (
    <Modal
      className="confirm-modal" 
      title="Confirmation"
      content="Are you sure you want to continue?"
      onApply={onConfirm}
      applyText="Confirm"
      onCancel={onCancel}
      cancelText="Cancel"
      onClose={onClose}
    />
  );
}

Form:

const [name, setName] = useState('');

return ( 
  <Modal
    className="confirm-modal" 
    title="Registration"
    subtitle="Fill the form to complete the registration"
    content={(
      <div> 
        <input 
          type="text" 
          name="name" 
          value={name} 
          onChange={(e) => setName(e.target.value)} 
        />
      </div>
    )}
    onApply={sendForm}
    applyText="Register"
    onCancel={onCancel}
    cancelText="Cancel"
  />
);

Configuration

Name	Type	Default	Description
style	Object	{}	Additional style
className	String	""	Additional classname
customHeader	Function(onClose) => JSX		Replaces title and subtitle container
title	String / JSX	null	Modal's title
subtitle	String / JSX	null	Modal's subtitle
content	String / JSX	null	Modal's content
language	String / Object	"en"	en/ru or Object, see example here(TODO file link)
icon	JSX	() => {}	Heading title icon
overlay	Boolean	true
maxWidth	Int	600	Max width for modal body, pass null for no style
noPaddingBody	Boolean	false	Determines should modal body have padding
portalTarget	Object	document.body	Portal target
parentOpenClassName	String	"tc-modal-opened"	ClassName for portalTarget on modal opened
onClose	Function	() => {}	Triggered when modal closed
isLoading	Boolean	false	If true, dispalays loader on the buttons
showApply	Boolean	true	Show the Apply button
onApply	Function	() => {}	OnClick handler for the Apply button
applyText	String	"Apply"	Text for the Apply button
showCancel	Boolean	true	Show the Cancel button
onCancel	Function	() => {}	OnClick handler for the Cancel button
cancelText	String	"Cancel"	Text for the Cancel button
isButtonsDisabled	Boolean	false	Disabled state for both Cancel and Apply buttons