rc-util

import React, { useRef, useState } from 'react'; import { createRoot } from 'react-dom/client'; import createChainedFunction from 'rc-util/lib/createChainedFunction'; import Portal from 'rc-util/lib/Portal'; const App = () => { const [log, setLog] = useState<string[]>([]); const containerRef = useRef<HTMLDivElement>(null); const handleClick1 = () => { setLog(prev => [...prev, 'Function 1 called!']); }; const handleClick2 = () => { setLog(prev => [...prev, 'Function 2 called!']); }; const chainedClickHandler = createChainedFunction(handleClick1, handleClick2); const getPortalContainer = () => { if (!containerRef.current) { // Create container if it doesn't exist const div = document.createElement('div'); div.id = 'portal-root'; document.body.appendChild(div); containerRef.current = div; } return containerRef.current; }; return ( <div> <h1>rc-util Demo</h1> <button onClick={chainedClickHandler}> Click Me (Chained Functions) </button> <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px' }}> <h2>Event Log:</h2> {log.length === 0 ? <p>No events yet.</p> : log.map((msg, i) => <p key={i}>{msg}</p>)} </div> <div ref={containerRef} style={{ border: '1px dashed blue', padding: '10px', marginTop: '20px' }}> Portal Mount Point (conceptually inside App, visually rendered here) </div> {/* Content rendered into the container obtained from getPortalContainer */} <Portal getContainer={getPortalContainer}> <div style={{ background: 'lightgreen', padding: '10px', border: '1px solid green' }}> This content is rendered via Portal! </div> </Portal> </div> ); }; const rootElement = document.getElementById('root'); if (rootElement) { createRoot(rootElement).render(<App />); } else { console.error("Root element with ID 'root' not found in the document."); }