React partals with hooks
![GitHub license](https://camo.githubusercontent.com/ed4c41ae899b83aa0c7619de2b51360a1683903bd172f0e0c8cbe365ab047b2f/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f72656163742d636d70742f7573652d706f7274616c)
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
https://github.com/react-cmpt/rc-demo
MIT