Add more cusomization about modali

[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!).

from modali.