# @tourmalinecore/react-tc-modal

> TC React Modal Component

Latest version **0.4.0** (published 2025-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @tourmalinecore/react-tc-modal
pnpm add @tourmalinecore/react-tc-modal
yarn add @tourmalinecore/react-tc-modal
bun add @tourmalinecore/react-tc-modal
```

## Health

**Score 30/100 (F)** — status: maintenance-mode.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.4.0 |
| Published | 2025-06-10 |
| First published | 2021-01-25 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Tourmaline Core |
| Maintainers | pandyz, tc.atretiakov, tcayasnovsky |
| Keywords | react, react-modal, modal, dialog |

## Links

- npm: https://www.npmjs.com/package/@tourmalinecore/react-tc-modal
- npm.io page: https://npm.io/package/@tourmalinecore/react-tc-modal

## Dependencies (1)

- [@tourmalinecore/react-tc-ui-kit](https://npm.io/package/@tourmalinecore/react-tc-ui-kit.md) ^0.5.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.4.0 (latest) — 2025-06-10
- 0.2.10-alpha.21 (canary) — 2022-11-16
- 0.3.0 — 2025-05-13
- 0.2.9 — 2021-09-29
- 0.2.8 — 2021-06-23
- 0.2.7 — 2021-06-23
- 0.2.5 — 2021-06-22
- 0.2.4 — 2021-04-08
- 0.2.3 — 2021-03-16
- 0.2.2 — 2021-03-15
- 0.2.1 — 2021-03-15
- 0.2.0 — 2021-03-15
- 0.1.1 — 2021-03-03
- 0.1.0 — 2021-01-25

## README

# Tourmaline Core react modal component

Modal dialog component for React.JS

## [Demo](https://tourmalinecore.github.io/React-Packages/?path=/story/modal--standard)

# 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
```JSX
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:**
```JSX
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:**
```JSX
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:**
```JSX
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 |

---
_Source: https://npm.io/package/@tourmalinecore/react-tc-modal · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._