Add more cusomization

[kevinduffey]

First.. great component. Very well done, easy to use, etc.

What I find is I need a couple of types of modals. The first is like what you have here, with a body, and a close button. This is great for quick notes/popups.

What I need more often is a modal with a title area (with custom color/gradient/etc), a body (again maybe with color options), and a footer area, primarily for buttons.

I would love to see you add the ability to not only specify a title (and color for text and background, borders, etc), color/border/etc for body, but some sort of button area with the ability to return the button clicked. I dont know if you should allow a component to be sent to the modal, or if you should just offer some most often used yes/no, save/close/cancel style buttons and a button clicked state option, or a hybrid approach where the user specifies the name of the button, text, left/right/center justify, color options, etc so they could maybe add a few buttons, like a cancel to the lower left, and a save to the right, each with different colors.

I realize that makes this a little more complicated, but it would essentially tick the majority use cases for modal popups, which in the past has often.. especially with Material Design, required a lot of extra work for multiple "simple" dialogs.

[jcrowson]

@kevinduffey Let me just take a quick second to thank you for taking the time to write this feedback, seriously 🙏. I built Modali to make developer's lives easier when implementing modals, and it's feedback like this that will help me reach that goal.

Now that's out of the way, let's discuss your feedback.

I really like the idea of being able to customize the modal easily, probably through the options. As you said, the three areas are:

• Title
• Body
• Footer (namely, buttons)

I've been thinking about this a lot, and the best way to illustrate what's in my head is to give you a code snippet of where I think I want to go when providing an interface for customizing Modali.

Take the hypothetical example below of a modal confirmation when deleting a user:

import Modali, { useModali } from 'modali';

const [exampleModal, toggleExampleModal] = useModali({
  title: 'Delete User',
  message: 'Are you sure you want to delete this user?',
  buttons: [
    <ModaliButton
      label="Delete"
      isStyleDestructive
      onClick={handleDeleteUser}
    />,
    <ModaliButton
      label="Cancel"
      isStyleCancel
      onClick={toggleExampleModal}
    />
  ],
  animated: true,
});

<Modali.Button /> would be a React button component that Modali provides out of the box, with its own styles (e.g. isStyleCancel, isStyleDestructive, etc).

I'd like to tackle customization in two waves:

1. Providing the core components and options to create a functioning, beautiful modal.
2. Providing the ability to customize these components by passing styles in to the Modali components.

I'm really interested to hear your thoughts (and anyone else who may be listening!).