@mantine/modals

What is @mantine/modals?

@mantine/modals is a package that provides a set of modal components for React applications. It is part of the Mantine library, which offers a comprehensive collection of UI components and hooks for building modern web applications. The modals package allows developers to create various types of modal dialogs with ease, including confirmation dialogs, form modals, and more.

What are @mantine/modals's main functionalities?

Basic Modal

This code demonstrates how to create a basic modal using the @mantine/modals package. The modal can be opened and closed by updating the state.

import { Modal, Button } from '@mantine/core';
import { useState } from 'react';

function BasicModal() {
  const [opened, setOpened] = useState(false);

  return (
    <>
      <Button onClick={() => setOpened(true)}>Open Modal</Button>
      <Modal opened={opened} onClose={() => setOpened(false)} title="Basic Modal">
        <div>Content of the modal</div>
      </Modal>
    </>
  );
}

Confirmation Modal

This code demonstrates how to create a confirmation modal using the @mantine/modals package. The modal asks the user to confirm an action and logs a message when confirmed.

import { Button } from '@mantine/core';
import { openConfirmModal } from '@mantine/modals';

function ConfirmationModal() {
  const openModal = () => {
    openConfirmModal({
      title: 'Please confirm your action',
      children: <p>Are you sure you want to proceed?</p>,
      labels: { confirm: 'Yes', cancel: 'No' },
      onConfirm: () => console.log('Confirmed'),
    });
  };

  return <Button onClick={openModal}>Open Confirmation Modal</Button>;
}

Form Modal

This code demonstrates how to create a form modal using the @mantine/modals package. The modal contains a text input and a submit button, and logs the input value when the form is submitted.

import { Modal, Button, TextInput } from '@mantine/core';
import { useState } from 'react';

function FormModal() {
  const [opened, setOpened] = useState(false);
  const [value, setValue] = useState('');

  const handleSubmit = () => {
    console.log('Form submitted with value:', value);
    setOpened(false);
  };

  return (
    <>
      <Button onClick={() => setOpened(true)}>Open Form Modal</Button>
      <Modal opened={opened} onClose={() => setOpened(false)} title="Form Modal">
        <TextInput value={value} onChange={(event) => setValue(event.currentTarget.value)} label="Your input" />
        <Button onClick={handleSubmit}>Submit</Button>
      </Modal>
    </>
  );
}

Other packages similar to @mantine/modals

react-modal

react-modal is a widely-used package for creating accessible modal dialogs in React applications. It provides a simple API for creating modals and supports various customization options. Compared to @mantine/modals, react-modal is more focused on accessibility and offers a more minimalistic approach.

react-bootstrap

react-bootstrap is a popular package that provides Bootstrap components for React applications, including modals. The modals in react-bootstrap are highly customizable and integrate seamlessly with the Bootstrap framework. Compared to @mantine/modals, react-bootstrap offers a broader range of components and is ideal for projects already using Bootstrap.

material-ui

material-ui is a comprehensive UI framework for React that includes a wide range of components, including modals. The modals in material-ui are highly customizable and follow the Material Design guidelines. Compared to @mantine/modals, material-ui offers a more extensive set of components and is suitable for projects that require adherence to Material Design principles.

README

Mantine modals manager

Manage modals state

View documentation

Installation

# With yarn
yarn add @mantine/hooks @mantine/core @mantine/modals

# With npm
npm install @mantine/hooks @mantine/core @mantine/modals

License

MIT