React partals with hooks
yarn add @react-cmpt/use-portal| 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 |
getRootContainer | function | () => document.body | To set the container |
| 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(); };| props | type | default | explain |
|---|---|---|---|
attrName | string | "react-cmpt-container" | setAttribute qualifiedName |
attrValue | string | "" | setAttribute value |
portalKey | string | undefined | createPortal key |
getRootContainer | function | () => document.body | To set the container |
import { Portal } from "@react-cmpt/use-portal"; const App = () => { return ( <Portal> <span>{"hello"}</span> </Portal> ); };| 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 |
getRootContainer | function | () => document.body | To set the container |
| 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> ); };# example yarn example # build package yarn build # tests yarn test