Simple Flexible Dialog Library For React – St Modal

St Modal is a simple, flexible, cross-platform modal dialog component for React.

Features:

  • Simple and easy to use api
  • Compatible with mobile devices
  • Implemented standard interaction functions: alert, confirm, prompt
  • Async/await syntax
  • Customization via css variables
  • Accessibility and focus control
  • Dynamic call of modal dialogs, which does not require definition in code
  • No third party libraries

Basic Usage:

1. Install the package.

# NPM
$ npm i react-st-modal --save

2. Import components into your app.

import {
  Alert
  Confirm
  Prompt
  CustomDialog, 
  StaticDialog,
  useDialog,
} from 'react-st-modal';

3. Create an alert dialog.

function AlertExample() {
  return (
    <div>
      <button
        onClick={async () => {
          await Alert('Alert text', 'Alert title');
        }}
      >
          Alert
      </button>
    </div>
  );
}

4. Create a confirm dialog.

function ConfirmExample() {
  return (
    <div>
      <button
        onClick={async () => {
          const result = await Confirm('Сonfirmation text', 
            'Сonfirmation title');
          
          if (result) {
            // Сonfirmation confirmed
          } else {
            // Сonfirmation not confirmed
          }
        }}
      >
        Confirm
      </button>
    </div>
  );
}

5. Create a custom confirm dialog.

function CustomDialogContent() {
  const dialog = useDialog();
  const [value, setValue] = useState();
  return (
    <div>
      <input
        type="text"
        onChange={(e) => {
          setValue(e.target.value);
        }}
      />
      <button
        onClick={() => {
          // Сlose the dialog and return the value
          dialog.close(value);
        }}
      >
        Custom button
      </button>
    </div>
  );
}
function CustomExample() {
  return (
    <div>
      <button
        onClick={async () => {
          const result = await CustomDialog(<CustomDialogContent />, {
            title: 'Custom Dialog',
            showCloseIcon: true,
          });
        }}
      >
        Custom
      </button>
    </div>
  );
}

6. You can also define modals in your JSX element using the StaticDialog component.

function CustomStaticExample() {
  const [isOpen, setOpen] = useState(false);
  return (
    <div>
      <StaticDialog
        isOpen={isOpen}
        title="Custom static dialog"
        onAfterClose={(result) => {
          setOpen(false);
          // do something with dialog result
        }}
      >
        {/* see previous demo */}
        <CustomDialogContent />
      </StaticDialog>
      <button
        onClick={() => {
          setOpen(true);
        }}
      >
        Custom static
      </button>
    </div>
  );
}

Previews:

Simple Flexible Dialog Library For React - St Modal Prompt

Prompt Dialog

Simple Flexible Dialog Library For React - St Modal Confirm

Confirm Dialog

Simple Flexible Dialog Library For React - St Modal Custom Dialog

Custom Dialog

Download Details:

Author: Nodlik

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/Nodlik/react-st-modal

License: MIT

You Might Be Interested In:

Add Comment