All Projects → upmostly → Modali

upmostly / Modali

A delightful modal dialog component for React, built from the ground up to support React Hooks.

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Modali

Customalertviewdialogue
Custom AlertView Dialogue is the world's most advanced alert view library. Custom AlertView Dialogue includes simple message popups, confirmation alerts, selector popups, action sheet bottom menus, and input/feedback contact forms.
Stars: ✭ 100 (-45.36%)
Mutual labels:  dialog, modal
React Modal Hook
Syntactic sugar for handling modals using React Hooks
Stars: ✭ 174 (-4.92%)
Mutual labels:  dialog, modal
React Native Push Notification Popup
A <NotificationPopup/> component for presenting your own push notification in react-native app
Stars: ✭ 111 (-39.34%)
Mutual labels:  dialog, modal
Ng Popups
🎉 Alert, confirm and prompt dialogs for Angular. Simple as that.
Stars: ✭ 80 (-56.28%)
Mutual labels:  dialog, modal
Popmodal
jquery plugin for showing tooltips, titles, modal dialogs and etc
Stars: ✭ 149 (-18.58%)
Mutual labels:  dialog, modal
Jbox
jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.
Stars: ✭ 1,251 (+583.61%)
Mutual labels:  dialog, modal
Vue Final Modal
🍕Vue Final Modal is a tiny, renderless, mobile-friendly, feature-rich modal component for Vue.js.
Stars: ✭ 128 (-30.05%)
Mutual labels:  dialog, modal
Bootstrap Show Modal
A Bootstrap 4 / jQuery plugin wrapper, to create modals dynamically in JavaScript
Stars: ✭ 38 (-79.23%)
Mutual labels:  dialog, modal
Bdialog
Extend the Bootstrap Modal features, making dialog more functions and easier to use, dialog type including modal, alert, mask and toast types
Stars: ✭ 174 (-4.92%)
Mutual labels:  dialog, modal
Djsemimodalviewcontroller
Simple semi modal presentation dialog with stacked content
Stars: ✭ 137 (-25.14%)
Mutual labels:  dialog, modal
React Poppop
A mobile support and multi-directional modal for ReactJS
Stars: ✭ 78 (-57.38%)
Mutual labels:  dialog, modal
Dialog
👻 A simple to use, highly customizable, and powerful modal for Angular Applications
Stars: ✭ 158 (-13.66%)
Mutual labels:  dialog, modal
React Native Alert Pro
The Pro Version of React Native Alert (Android & iOS)
Stars: ✭ 69 (-62.3%)
Mutual labels:  dialog, modal
Launchy
Launchy: An Accessible Modal Window
Stars: ✭ 89 (-51.37%)
Mutual labels:  dialog, modal
Ng2 Bootstrap Modal
Library to simplify the work with bootstrap modal dialogs
Stars: ✭ 53 (-71.04%)
Mutual labels:  dialog, modal
A11y Dialog
A very lightweight and flexible accessible modal dialog script.
Stars: ✭ 1,768 (+866.12%)
Mutual labels:  dialog, modal
Simplelightbox
Touch-friendly image lightbox for mobile and desktop
Stars: ✭ 744 (+306.56%)
Mutual labels:  dialog, modal
Rodal
A React modal with animations.
Stars: ✭ 754 (+312.02%)
Mutual labels:  dialog, modal
Svelte Simple Modal
A simple, small, and content-agnostic modal for Svelte v3
Stars: ✭ 130 (-28.96%)
Mutual labels:  dialog, modal
Alertifyjs
A javascript framework for developing pretty browser dialogs and notifications.
Stars: ✭ 1,922 (+950.27%)
Mutual labels:  dialog, modal

🦞 modali

A delightful modal dialog library for React, built from the ground up to support React Hooks. Modali provides a simple interface to build beautiful modals in minutes.

drawing

A full tutorial on Modal Components in React Using Custom Hooks can be found over at https://upmostly.com

Live Demo

https://upmostly.github.io/modali/

Installation

Install Modali in your project using npm:

npm install --save modali

⚠️ Modali uses React Hooks, therefore you are required to use React v16.8 or above when using Modali.

Usage

Import the Modali component and useModali Hook in your React components, like so:

import Modali, { useModali } from 'modali';

After you've imported the Modali component and useModali Hook, you're ready to start using Modali inside your components! 🎉

Basic Modal

import React from 'react';
import Modali, { useModali } from 'modali';

const App = () => {
  const [exampleModal, toggleExampleModal] = useModali();

  return (
    <div className="app">
      <button onClick={toggleExampleModal}>
        Click me to open the modal
      </button>
      <Modali.Modal {...exampleModal}>
        Hi, I'm a Modali!
      </Modali.Modal>
    </div>
  );
};

export default App;

Title, Message, and Buttons

Modali provides everything you need to build beautiful modals in minutes. Use the title, message and buttons props to customize your modal as quick as a flash! ⚡️

import React from 'react';
import Modali, { useModali } from 'modali';

const App = () => {
  const [completeExample, toggleCompleteModal] = useModali({
    animated: true,
    title: 'Are you sure?',
    message: 'Deleting this user will be permanent.',
    buttons: [
      <Modali.Button
        label="Cancel"
        isStyleCancel
        onClick={() => toggleCompleteModal()}
      />,
      <Modali.Button
        label="Delete"
        isStyleDestructive
        onClick={() => deleteUserWithId('123')}
      />,
    ],
  });

  return (
    <div className="app">
      <button onClick={toggleCompleteModal}>
        Click me to open the modal
      </button>
      <Modali.Modal {...completeExample} />
    </div>
  );
};

export default App;

useModali Hook

Much like the useState Hook, the useModali Hook returns two values which can be named whatever you'd like:

  • An object containing props which must be passed into the Modali component.
  • A function to toggle the Modali component.

This is demonstrated in the example above, from the following line:
const [exampleModal, toggleExampleModal] = useModali();

  • exampleModal is the props object. Again, this must be passed into the Modali component.
  • toggleExampleModal is the function to show/hide Modali.

<Modali.Modal /> Component

The <Modali.Modal /> component provides a beautiful, WAI-ARIA accessible modal dialog out of the box. Import it, add it to your component tree, pass in the props object that you get from the useModali Hook and you're all set.

...

const [exampleModal, toggleExampleModal] = useModali();

return (
  <Modali.Modal {...exampleModal}>
    Hi, I'm a Modali
  </Modali.Modal>
);

...

<Modali.Button /> Component

The <Modali.Button /> component provides a ready-to-go button component that includes three separate styles of button: default, cancel, and destructive.

...

const [completeExample, toggleCompleteModal] = useModali({
  buttons: [
    <Modali.Button
      label="Done"
      isStyleDefault
      onClick={() => handleDoneClicked()}
    />,
    <Modali.Button
      label="Cancel"
      isStyleCancel
      onClick={() => toggleCompleteModal()}
    />,
    <Modali.Button
      label="Delete"
      isStyleDestructive
      onClick={() => deleteUserWithId('123')}
    />,
  ],
});

return (
  <Modali.Modal {...exampleModal}>
    Hi, I'm a Modali
  </Modali.Modal>
);

...

<Modali.Button/> Props

Prop Description
label String that is shown on the button
isStyleDefault Pass in this prop as true to show the default button
isStyleCancel Pass in this prop as true to show a cancel button
isStyleDestructive Pass in this prop as true to show a delete button
onClick Called when the button is clicked

More Examples

Multiple Modals

This flexibility of being able to name the props object and toggle function allows us to use multiple Modalis in the same component:

import React from 'react';
import Modali, { useModali } from 'modali';

const App = () => {
  const [firstModal, toggleFirstModal] = useModali();
  const [secondModal, toggleSecondModal] = useModali();
  
  return (
    <div className="app">
      <button onClick={toggleFirstModal}>
        Click me to open the first modal!
      </button>
      <button onClick={toggleSecondModal}>
        Click me to open the second modal!
      </button>
      <Modali.Modal {...firstModal}>
        Hi, I'm the first Modali
      </Modali.Modal>
      <Modali.Modal {...secondModal}>
        And I'm the second Modali
      </Modali.Modal>
    </div>
  );
};

export default App;

Modali Options

Modali provides an easy to use interface for accessing useful events, such as when the modal shows and hides.

Events

Event Description
onShow Called when the component finishes mounting to the DOM
onHide Called when the component is removed from the DOM
onEscapeKeyDown Called when the escape key is pressed while the component is mounted to the DOM
onOverlayClicked Called when the modal overlay back is clicked while the component is mounted to the DOM

Example

const [exampleModal, toggleExampleModal] = useModali({
  onShow: () => console.log('Modali is shown'),
  onHide: () => console.log('Modali is hidden')
});

Modali can be easily customized by passing in an object of key/value pairs to the useModali Hook's initializer:

Props

Option Default Value Description
title string The text displayed in the upper left corner
message string The text displayed in the body of the modal
buttons array Displays whatever is passed in in the footer
closeButton true Controls the visibility of the close button
animated false Fades in the modal when it mounts to the DOM
centered false Positions the modal in the center of the screen
large false Changes the size of the modal to be 800px wide
overlayClose true Disables clicking the modal overlay to hide it
keyboardClose true Disables the ESC key hiding the modal

Example

const [exampleModal, toggleExampleModal] = useModali({
  animated: true,
  large: true,
  closeButton: false,
});

Of course, props and events can be combined when passing the options to the useModali Hook:

function handleModalOnHide() {
  // do something when the modal hides
}

const [exampleModal, toggleExampleModal] = useModali({
  onHide: handleModalOnHide,
  large: true,
  closeButton: false,
});

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].