Modal

import Modal from 'frui/Modal';

Copy

Props

Name	Type	Required	Notes
absolute	boolean	No	Absolute position
className	string	No	Standard HTML class names
color	string	No	Custom CSS hex or name for the modal header
curved	boolean	No	Slightly curved modal
fixed	boolean	No	Fixed position
opened	boolean	No	Whether to open the modal or not
rounded	boolean	No	Rounded modal
style	CSS Object	No	Standard CSS input
title	string	Yes	Title of modal

Basic

By default, modal wont show until opened is set to true.

<Modal opened absolute color="salmon" title="Delete Item" className="text-white">
  <div className="p-3 bg-white text-black">
    Are you sure you want to delete this item ?
  </div>
</Modal>

Copy

Rounded

Modals can be rounded in three ways: curved, and rounded.

<Modal curved opened absolute color="salmon" title="Delete Item" className="text-white">
  <div className="p-3 bg-white text-black">
    Are you sure you want to delete this item ?
  </div>
</Modal>

Copy

<Modal rounded opened absolute color="salmon" title="Delete Item" className="text-white">
  <div className="p-3 bg-white text-black">
    Are you sure you want to delete this item ?
  </div>
</Modal>

Copy

Open & Close

To open and close modals, you can use useState from react, then pass the opened, and the open function to the modal like the following code example.

import { useState } from 'react';

function Page() {
  const [ opened, open ] = useState(false);
  return (
    <Button warning onClick={() => open(true)}>Open Modal</Button>
    <Modal curved opened={opened} absolute color="salmon" title="Delete Item" className="text-white" onClose={() => open(false)}>
      <div className="bg-white p-3 text-black">
        Are you sure you want to delete this item ?
      </div>
    </Modal>
  );
}

Copy

Absolute & Fixed

Absolute modals shows within the container closest to position relative in your HTML. Fixed modals shows on a page level. You can toggle between the two by adding fixed, or absolute in the modal like the following code example. By default modals are fixed.

<Modal fixed opened={opened} color="salmon" title="Delete Item" className="text-white" onClose={() => open(false)}>
  <div className="bg-white p-3 text-black">
    Are you sure you want to delete this item ?
  </div>
</Modal>

Copy

Global Modal

Most of the time you want one modal up at a time. To do this we need to first setup a global modal provider in the project App page.

//app.js
import { ModalProvider } from 'frui/Modal';

export default function App({ children }) {
  return (
    <ModalProvider color="salmon" rounded className="text-white">
      {children}
    </ModalProvider>
  );
}

Copy

Then in your page, import useModal, define a ModelBody, and then connect it all in your Page component. The following shows how this can be done.

//page.js
import { useModal } from 'frui/Modal';
import Button from 'frui/Button';

function ModalBody() {
  return (
    <div className="bg-white p-3 text-black">
      Are you sure you want to delete this item ?
    </div>
  );
}

export default function Page() {
  const modal = useModal();
  const body = (<ModalBody />);
  const open = () => {
    modal.title('Delete Item');
    modal.body(body);
    modal.open(true);
  };

  return (
    <Button warning onClick={open}>Open Modal</Button>
  );
}

Copy

Custom Styles

You can add your own custom class to the modal component or set any combination of the following CSS classes: frui-modal, frui-modal-overlay, frui-modal-head, frui-modal-title, frui-modal-body

Loaders

Tables