target

Description

Optional. The DOM node that receives the content sent by the Portal component

Usage

target?: HTMLElement;

Example

import { useState, useRef } from "react";
import { Modal, TextArea, Portal, Button } from "@svar-ui/react-core";

export default function Example() {
  const [custom, setCustom] = useState(false);
  const box = useRef<HTMLDivElement | null>(null);

  function hideAll() {
    setCustom(false);
  }

  return (
    <>
      <Button onClick={() => setCustom(!custom)}>Show Dialog</Button>
      <div ref={box} />

      {custom && (
        <Portal target={box.current}>
          <Modal>
            <TextArea placeholder="Some text" />
            <div style={{ marginTop: 20 }}>
              <Button onClick={hideAll}>Yes</Button>
              <Button onClick={hideAll}>No</Button>
              <Button onClick={hideAll}>Maybe</Button>
            </div>
          </Modal>
        </Portal>
      )}
    </>
  );
}

Related article: Setting the target