{"library":"react-polymorphed","title":"React Polymorphed Components","description":"react-polymorphed is a TypeScript-focused utility library designed to simplify the creation of type-safe polymorphic React components. It provides a set of types and helper functions that enable components to render as different HTML elements or other React components via an `as` prop, while maintaining strong type inference and preventing common prop errors. Currently at version 2.2.2, the library is actively maintained, with a release cadence typical for a utility focused on React type enhancements, responding to changes in React or TypeScript. Its key differentiator is the comprehensive support for `forwardRef`, `memo`, and `lazy` with polymorphic types, building on foundations laid by `react-polymorphic-types` to offer a robust and developer-friendly experience for complex component patterns.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-polymorphed"],"cli":null},"imports":["import { PolymorphicComponent } from 'react-polymorphed';","import { PolyRefFunction } from 'react-polymorphed';","import { PolyMemoComponent } from 'react-polymorphed';","import { OnlyAs } from 'react-polymorphed';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { forwardRef, useRef } from 'react';\nimport { PolyRefFunction } from 'react-polymorphed';\n\n// Cast forwardRef to PolyRefFunction for type-safe ref forwarding in polymorphic components\nconst polyRef = forwardRef as PolyRefFunction;\n\ntype ButtonProps = {\n  size?: 'small' | 'large';\n  children: React.ReactNode;\n};\n\n// Create a polymorphic button component that supports ref forwarding\nconst Button = polyRef<'button', ButtonProps>(\n  ({ as: As = 'button', size, children, ...props }, ref) => {\n    const sizeClass = size === 'small' ? 'px-2 py-1 text-sm' : 'px-4 py-2 text-base';\n    return (\n      <As\n        ref={ref}\n        className={`bg-blue-500 text-white rounded ${sizeClass}`}\n        {...props}\n      >\n        {children}\n      </As>\n    );\n  }\n);\n\n// Example usage of the polymorphic button\nconst App = () => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const anchorRef = useRef<HTMLAnchorElement>(null);\n\n  return (\n    <div className=\"p-4 flex flex-col gap-4\">\n      <Button type=\"submit\" size=\"small\" ref={buttonRef}>\n        Submit Button\n      </Button>\n      <Button as=\"a\" href=\"https://example.com\" target=\"_blank\" size=\"large\" ref={anchorRef}>\n        Link to Example\n      </Button>\n      {/* This would cause a type error as 'div' does not have 'href' */}\n      {/* <Button as=\"div\" href=\"#\">Div as Link</Button> */}\n      {/* This would cause a type error due to ref mismatch */}\n      {/* <Button as=\"div\" ref={buttonRef}>Div with Button Ref</Button> */}\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This quickstart demonstrates how to create a ref-forwarded polymorphic `Button` component using `react-polymorphed`. It shows the casting of `forwardRef` to `PolyRefFunction`, defines component-specific props, and illustrates how the `as` prop dynamically changes the rendered element and its associated types, preventing invalid prop usage.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}