import React, { useLayoutEffect, useRef, useState } from 'react';
import ReactDOM from 'react-dom';
export const Conditional = (props) => {
const [target] = useState(() => document.createElement('div'));
const containerRef = useRef();
const activeRef = useRef(false);
activeRef.current = activeRef.current || props.active;
useLayoutEffect(() => {
if (props.active) {
containerRef.current.appendChild(target);
} else {
try {
containerRef.current.removeChild(target);
} catch (e) {
console.log(e);
}
}
}, [props.active]);
return (
<>
{activeRef.current && ReactDOM.createPortal(props.children, target)}
);
};
const Foo = () =>
Foo
;export const Page = () => {
const [hidden] = useState(false);
return (
);
};
