{"library":"rc-util","title":"rc-util: Common React Utilities","description":"rc-util is a foundational utility library within the React ecosystem, specifically developed to provide common helper functions and components for other React libraries (often those under the `react-component` organization like Ant Design). It offers a suite of low-level utilities such as `createChainedFunction` for combining multiple event handlers, a `deprecated` logger for warning about API changes, and `Portal` for rendering children outside the DOM hierarchy. The current stable version is `5.44.4`. While a specific, detailed release cadence for `rc-util` is not directly specified in the available metadata, the project is actively maintained, receiving updates to address various React development challenges and support newer React versions, as evidenced by related package activity. Its key differentiator lies in its focused, unopinionated approach, providing essential building blocks without imposing architectural patterns, making it a reliable dependency for complex UI component libraries.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install rc-util"],"cli":null},"imports":["import createChainedFunction from 'rc-util/lib/createChainedFunction';","import deprecated from 'rc-util/lib/deprecated';","import Portal from 'rc-util/lib/Portal';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useRef, useState } from 'react';\nimport { createRoot } from 'react-dom/client';\nimport createChainedFunction from 'rc-util/lib/createChainedFunction';\nimport Portal from 'rc-util/lib/Portal';\n\nconst App = () => {\n  const [log, setLog] = useState<string[]>([]);\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  const handleClick1 = () => {\n    setLog(prev => [...prev, 'Function 1 called!']);\n  };\n\n  const handleClick2 = () => {\n    setLog(prev => [...prev, 'Function 2 called!']);\n  };\n\n  const chainedClickHandler = createChainedFunction(handleClick1, handleClick2);\n\n  const getPortalContainer = () => {\n    if (!containerRef.current) {\n      // Create container if it doesn't exist\n      const div = document.createElement('div');\n      div.id = 'portal-root';\n      document.body.appendChild(div);\n      containerRef.current = div;\n    }\n    return containerRef.current;\n  };\n\n  return (\n    <div>\n      <h1>rc-util Demo</h1>\n      <button onClick={chainedClickHandler}>\n        Click Me (Chained Functions)\n      </button>\n      <div style={{ marginTop: '20px', border: '1px solid #ccc', padding: '10px' }}>\n        <h2>Event Log:</h2>\n        {log.length === 0 ? <p>No events yet.</p> : log.map((msg, i) => <p key={i}>{msg}</p>)}\n      </div>\n\n      <div ref={containerRef} style={{ border: '1px dashed blue', padding: '10px', marginTop: '20px' }}>\n        Portal Mount Point (conceptually inside App, visually rendered here)\n      </div>\n\n      {/* Content rendered into the container obtained from getPortalContainer */}\n      <Portal getContainer={getPortalContainer}>\n        <div style={{ background: 'lightgreen', padding: '10px', border: '1px solid green' }}>\n          This content is rendered via Portal!\n        </div>\n      </Portal>\n    </div>\n  );\n};\n\nconst rootElement = document.getElementById('root');\nif (rootElement) {\n  createRoot(rootElement).render(<App />);\n} else {\n  console.error(\"Root element with ID 'root' not found in the document.\");\n}\n","lang":"typescript","description":"This quickstart demonstrates how to use `createChainedFunction` to combine multiple event handlers and `Portal` to render content into a specific DOM node, which is useful for overlays or modals.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}