feat: add portal

Author: fupengl

src/components/index.ts

@@ -6,3 +6,5 @@ export type { CacheComponentDOMProps } from './cache-component-dom';
 
 export { default as LoadScript } from './load-script';
 export { LoadScriptProps } from './load-script';
+
+export { default as Portal } from './portal';

src/components/portal/index.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+export type PortalRef = {};
+
+export interface PortalProps {
+  didUpdate?: (prevProps: PortalProps) => void;
+  getContainer: () => Element;
+  children?: React.ReactNode;
+}
+
+const Portal = React.forwardRef<PortalRef, PortalProps>((props, ref) => {
+  const { didUpdate, getContainer, children } = props;
+
+  const containerRef = React.useRef<Element>();
+
+  React.useImperativeHandle(ref, () => ({}));
+
+  const initRef = React.useRef(false);
+  if (!initRef.current) {
+    containerRef.current = getContainer();
+    initRef.current = true;
+  }
+
+  React.useEffect(() => {
+    didUpdate?.(props);
+  });
+
+  React.useEffect(() => {
+    return () => {
+      containerRef.current?.parentNode?.removeChild(containerRef.current);
+    };
+  }, []);
+
+  return containerRef.current ? ReactDOM.createPortal(children, containerRef.current) : null;
+});
+
+export default Portal;

src/hooks/index.ts

@@ -30,6 +30,7 @@ export { default as useEventListener } from './useEventListener';
 export { default as useHover } from './useHover';
 export { default as useSize } from './useSize';
 
+// state
 export { default as useSet } from './useSet';
 export { default as useMap } from './useMap';
 export { default as useError } from './useError';