@tourmalinecore/react-tc-modal v0.2.9

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