use-portal

React partals with hooks

Usage

Installation

yarn add @react-cmpt/use-portal

usePortal

| options | type | default | explain | | --------------- | ------- | ---------------------- | ----------------------------------------------------- | | initialAppend | boolean | true | Whether to append the child node in the mounted state | | attrName | string | "react-cmpt-container" | setAttribute qualifiedName | | attrValue | string | "" | setAttribute value |

| return | type | explain | | -------------- | -------- | -------------------------------------------------------------- | | getChild | function | Callback for obtaining the current container mount child node. | | getContainer | function | Callback for obtaining the container element. | | appendChild | function | Manually append the child node. (Default current node) | | removeChild | function | Manually remove the child node. (Default current node) |

import { usePortal } from "@react-cmpt/use-portal";

const App = () => {
  const { getChild, getContainer, appendChild, removeChild } = usePortal();
};

Portal

| props | type | default | explain | | ----------- | ------ | ---------------------- | -------------------------- | | attrName | string | "react-cmpt-container" | setAttribute qualifiedName | | attrValue | string | "" | setAttribute value | | portalKey | string | undefined | createPortal key |

import { Portal } from "@react-cmpt/use-portal";

const App = () => {
  return (
    <Portal>
      <span>{"hello"}</span>
    </Portal>
  );
};

useEventPortal

| options | type | default | explain | | ----------------- | ------- | ---------------------- | -------------------------- | | defaultVisiable | boolean | false | initial visiable value | | attrName | string | "react-cmpt-container" | setAttribute qualifiedName | | attrValue | string | "" | setAttribute value | | portalKey | string | undefined | createPortal key |

| return | type | explain | | -------------- | --------------- | -------------------------------------------------------------- | | Portal | React.ReactNode | Portal holder | | visiable | boolean | Whether the element is visible | | onShow | function | Show trigger event | | onClose | function | Hide trigger event | | getChild | function | Callback for obtaining the current container mount child node. | | getContainer | function | Callback for obtaining the container element. |

import { useEventPortal } from "@react-cmpt/use-portal";

const App = () => {
  const {
    Portal,
    visiable,
    onShow,
    onClose,
    getChild,
    getContainer,
  } = useEventPortal({});

  return (
    <Portal>
      <span>{"hello"}</span>
    </Portal>
  );
};

Dev

# example
yarn example

# build package
yarn build

# tests
yarn test

workflow

https://github.com/react-cmpt/rc-demo

License

MIT