@react-cmpt/use-portal NPM

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

react react-portal portal react-component modal dialog

@infinitebrahmanuniverse/nolb-_react-c @everything-registry/sub-chunk-763

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago