accessible-ui / modal Goto Github PK

import * as React from "react";
import * as Modal from "@accessible/modal";

const Component = () => (
  <Modal.Modal>
    <Modal.Trigger>
      <button>Open first modal</button>
    </Modal.Trigger>
    <Modal.Trigger>
      <button>Open second modal</button>
    </Modal.Trigger>

    <Modal.Target>
      <div className="my-modal">
        <Modal.CloseButton>
          <button>Close first modal</button>
        </Modal.CloseButton>

        <div>First modal</div>
      </div>
    </Modal.Target>
    <Modal.Target>
      <div className="my-modal">
        <Modal.CloseButton>
          <button>Close second modal</button>
        </Modal.CloseButton>

        <div>Second modal</div>
      </div>
    </Modal.Target>
  </Modal.Modal>
);