Windowless glass

Example

Click the button to open a modal windowless glass. Click the backdrop or the close action to dismiss it. addWindowlessGlass is available through the useWindow hook — because a windowless glass floats on document.body, it works from the WindowProvider alone, with no Window mounted. See addWindowlessGlass for all options.

import { WindowProvider, useWindow } from 'react-bwin';
import 'react-bwin/react-bwin.css';

function WindowlessGlass() {
  const { addWindowlessGlass } = useWindow();

  function handleClick() {
    addWindowlessGlass({
      modal: true,
      closeOnBackdropClick: true,
      width: 240,
      height: 140,
      title: 'Dialog',
      content: <em>Click the backdrop or the close action to dismiss.</em>,
    });
  }

  return <button onClick={handleClick}>Open dialog</button>;
}

export default function Example() {
  return (
    <WindowProvider>
      <WindowlessGlass />
    </WindowProvider>
  );
}