Customize actions

Example

Each glass shows the default actions plus a custom Split action in its menu. Open a glass's action menu and click Split to add a pane below it. Pass the actions array as a prop on the Window. See General — Actions for the action object and placement details.

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

function Actions() {
  let count = 2;

  const splitAction = {
    label: 'Split',
    placement: 'menu',
    onClick: (event, binaryWindow) => {
      const paneEl = event.target.closest('bw-pane');
      const sashId = paneEl.getAttribute('sash-id');
      count += 1;
      binaryWindow.addPane(sashId, {
        position: 'bottom',
        size: '50%',
        title: `Pane ${count}`,
        content: `Pane ${count}`,
      });
    },
  };

  return (
    <div style={{ width: 400, height: 260 }}>
      <Window
        fitContainer
        actions={[...DEFAULT_GLASS_ACTIONS, splitAction]}
        panes={[
          { position: 'left', id: 'pane-1', title: 'Pane 1', content: <div>Pane 1</div> },
          { position: 'right', id: 'pane-2', title: 'Pane 2', content: <div>Pane 2</div> },
        ]}
      />
    </div>
  );
}

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