Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@rmwc/dialog

Package Overview
Dependencies
Maintainers
1
Versions
177
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rmwc/dialog

RMWC Dialog component

  • 8.0.0
  • Source
  • npm
  • Socket score
Version published
Weekly downloads
3.2K
increased by13.81%
Maintainers
1
Weekly downloads
 
Created
Source

Dialogs

Dialogs inform users about a specific task and may contain critical information, require decisions, or involve multiple tasks.

  • Module @rmwc/dialog
  • Import styles:
    • Using CSS Loader
      • import '@rmwc/dialog/styles';
    • Or include stylesheets
      • '@material/dialog/dist/mdc.dialog.css'
      • '@material/button/dist/mdc.button.css'
      • '@material/ripple/dist/mdc.ripple.css'
  • MDC Docs: https://material.io/develop/web/components/dialogs/

Standard Usage

function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <Dialog
        open={open}
        onClose={(evt) => {
          console.log(evt.detail.action);
          setOpen(false);
        }}
        onClosed={(evt) => console.log(evt.detail.action)}
      >
        <DialogTitle>Dialog Title</DialogTitle>
        <DialogContent>This is a standard dialog.</DialogContent>
        <DialogActions>
          <DialogButton action="close">Cancel</DialogButton>
          <DialogButton action="accept" isDefaultAction>
            Sweet!
          </DialogButton>
        </DialogActions>
      </Dialog>

      <Button raised onClick={() => setOpen(true)}>
        Open standard Dialog
      </Button>
    </>
  );
}

Simplified Usage

Material Dialogs are a complex component. RMWC contains an additional SimpleDialog component for ease of use that internally contains the default structure already built out. Illustrated below is both the standard and simple dialog usage.

function Example() {
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <SimpleDialog
        title="This is a simple dialog"
        body="You can pass the body prop or children."
        open={open}
        onClose={(evt) => {
          console.log(evt.detail.action);
          setOpen(false);
        }}
      />

      <Button raised onClick={() => setOpen(true)}>
        Open Simple Dialog
      </Button>
    </>
  );
}

Usage with DialogQueue

Some dialog interactions are complex, but a lot of the time you just need a simple alert or confirm dialog. DialogQueue allows you to open dialogs from anywhere in your app and emulates the browsers built in alert, confirm and prompt dialogs. If you've used the SnackbarQueue, the DialogQueue is very similar.

Setup is nice and easy, create a queue object you can pass around in your code base, pass the queues dialogs to the DialogQueuecomponent, and then use the alert, prompt or confirm api to open dialogs.


  `
// Create a file that exports your queue
// myQueue.js
import { createDialogQueue } from '@rmwc/dialog';

export const queue = createDialogQueue();




  `
// Somewhere at the top level of your app
// Render the DialogQueue
import React from 'react';
import { queue } from './myQueue';

export default function App() {
  return (
    <div>
      ...
      <DialogQueue
        dialogs={queue.dialogs}
        // You can also pass default options to pass to your dialogs
        // ie, prevent all dialogs from dismissing from a click on the background scrim
        preventOutsideDismiss
      />
    </div>
  )
}

The alert, confirm, and prompt functions were designed to mimic the the built-in browser methods with a couple of small difference. First, they all return a promise. The promise will always resolve successfully with the response indicating the appropriate action. alert the response will be accept for clicking the ok button, or close. confirm will resolve true or false, and prompt will resolve with the value entered into the input, or null if the closed the dialog. Second, all methods the methods accept any valid prop for SimpleDialog.


  `
// Somewhere else in your app
// Could be a view, your redux store, anywhere you want...
import { queue } from './myQueue';

queue.alert({
  title: 'Hi there',
  body: 'Whats going on?'
});

queue.confirm({
  title: <b>Are you positive?</b>,
  body: 'You have selected pizza instead icecream!',
  acceptLabel: 'CONFIRM'
});

queue.prompt({
  title: 'Whats your name?',
  body: 'Anything will do',
  acceptLabel: 'Submit',
  cancelLabel: 'Skip',
  // For prompts only, you can pass props to the input
  inputProps: {
    outlined: true
  }
});



() => {
  const { dialogs, alert, confirm, prompt } = createDialogQueue();

  function App() {
    const [response, setResponse] = React.useState('____________');

    const fireAlert = () =>
      alert({ title: 'Hello!' }).then((res) => setResponse(res));

    const fireConfirm = () =>
      confirm({}).then((res) => setResponse(res));

    const firePrompt = () =>
      prompt({ inputProps: { outlined: true } }).then((res) =>
        setResponse(res)
      );

    return (
      <div>
        <Button label="Alert" onClick={fireAlert} />
        <Button label="Confirm" onClick={fireConfirm} />
        <Button label="Prompt" onClick={firePrompt} />
        <Button
          label="In Sequence"
          onClick={() => {
            fireAlert();
            fireConfirm();
            firePrompt();
          }}
        />

        <p>
          Response: <b>{String(response)}</b>
        </p>
        <DialogQueue dialogs={dialogs} />
      </div>
    );
  }
  return <App />;
}

Rendering through Portals

Occasionally, you may find your dialog being cut off from being inside a container that is styled to be overflow:hidden. RMWC provides a renderToPortal prop that lets you use React's portal functionality to render the menu dropdown in a different container.

You can specify any element or selector you want, but the simplest method is to pass true and use RMWC's built in Portal component.


  `
  // Somewhere at the top level of your app
  // Render the RMWC Portal
  // You only have to do this once
  import React from 'react';
  import { Portal } from '@rmwc/base';

  export default function App() {
    return (
      <div>
        ...
        <Portal />
      </div>
    )
  }
`

Now you can use the renderToPortal prop. Below is a contrived example of a dialog being cut off due to overflow: hidden.

function Example() {
  const [renderToPortal, setRenderToPortal] = React.useState(true);
  const [open, setOpen] = React.useState(false);
  return (
    <>
      <div
        id="dialog-portal-example"
        style={{
          transform: 'translateZ(0)',
          height: '20rem',
          overflow: 'hidden'
        }}
      >
        <SimpleDialog
          title={`This is a ${
            renderToPortal ? 'working!' : 'broken :/'
          }`}
          renderToPortal={renderToPortal}
          body="Use `renderToPortal` to get around `overflow:hidden` and layout issues."
          open={open}
          onClose={(evt) => {
            console.log(evt.detail.action);
            setOpen(false);
          }}
        />

        <Button
          raised
          onClick={() => {
            setRenderToPortal(false);
            setOpen(true);
          }}
        >
          Open Broken :/
        </Button>

        <Button
          raised
          onClick={() => {
            setRenderToPortal(true);
            setOpen(true);
          }}
        >
          Open in Portal
        </Button>
      </div>
    </>
  );
}

Dialog

A Dialog component.

Props

NameTypeDescription
foundationRefReact.Ref<MDCDialogFoundation>Advanced: A reference to the MDCFoundation.
onCloseundefined | (evt: DialogOnCloseEventT) => voidCallback for when the Dialog beings to close. evt.detail = { action?: string }
onClosedundefined | (evt: DialogOnCloseEventT) => voidCallback for when the Dialog finishes closing. evt.detail = { action?: string }
onOpenundefined | (evt: DialogOnOpenEventT) => voidCallback for when the Dialog opens.
onOpenedundefined | (evt: DialogOnOpenedEventT) => voidCallback for when the Dialog finishes opening
openundefined | false | trueWhether or not the Dialog is showing.
preventOutsideDismissundefined | false | truePrevent the dialog from closing when the scrim is clicked or escape key is pressed.
renderToPortalPortalPropTRenders the dialog to a portal. Useful for situations where the dialog might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal.

DialogTitle

The Dialog title.

DialogContent

The Dialog content.

DialogActions

Actions container for the Dialog.

DialogButton

Action buttons for the Dialog.

Props

NameTypeDescription
actionundefined | stringAn action returned in evt.detail.action to the onClose handler.
isDefaultActionundefined | false | trueIndicates this is the default selected action when pressing enter

SimpleDialog

A SimpleDialog component for ease of use.

Props

NameTypeDescription
acceptLabelReact.ReactNodeCreates an accept button for the default Dialog template with a given label. You can pass null to remove the button.
bodyReact.ReactNodeBody content for the default Dialog template, rendered before children.
cancelLabelReact.ReactNodeCreates an cancel button for the default Dialog with a given label. You can pass null to remove the button.
childrenReact.ReactNodeAny children will be rendered in the body of the default Dialog template.
footerReact.ReactNodeAdditional footer content for the default Dialog template, rendered before any buttons.
foundationRefReact.Ref<MDCDialogFoundation>Advanced: A reference to the MDCFoundation.
headerReact.ReactNodeAdditional Dialog header content for the default Dialog template.
onCloseundefined | (evt: DialogOnCloseEventT) => voidCallback for when the Dialog beings to close. evt.detail = { action?: string }
onClosedundefined | (evt: DialogOnCloseEventT) => voidCallback for when the Dialog finishes closing. evt.detail = { action?: string }
onOpenundefined | (evt: DialogOnOpenEventT) => voidCallback for when the Dialog opens.
onOpenedundefined | (evt: DialogOnOpenedEventT) => voidCallback for when the Dialog finishes opening
openundefined | false | trueWhether or not the Dialog is showing.
preventOutsideDismissundefined | false | truePrevent the dialog from closing when the scrim is clicked or escape key is pressed.
renderToPortalPortalPropTRenders the dialog to a portal. Useful for situations where the dialog might be cutoff by an overflow: hidden container. You can pass "true" to render to the default RMWC portal.
titleReact.ReactNodeA title for the default Dialog template.

Keywords

FAQs

Package last updated on 03 Jun 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Socket Now Supports uv.lock Files

Product

Socket Now Supports uv.lock Files

Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.

By Trevor Norris  -  Jan 09, 2025
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc