Simple Flexible Dialog Library For React – St Modal

Description:

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:

Prompt Dialog

Confirm Dialog

Custom Dialog