{"id":13395145,"url":"https://github.com/kripod/react-polymorphic-types","last_synced_at":"2025-04-05T05:06:55.031Z","repository":{"id":40379239,"uuid":"324813414","full_name":"kripod/react-polymorphic-types","owner":"kripod","description":"Zero-runtime polymorphic component definitions for React","archived":false,"fork":false,"pushed_at":"2024-04-03T10:27:32.000Z","size":27,"stargazers_count":194,"open_issues_count":10,"forks_count":8,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-09-19T00:52:27.032Z","etag":null,"topics":["as-prop","polymorphism","react","typescript"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kripod.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"kripod"}},"created_at":"2020-12-27T17:29:12.000Z","updated_at":"2024-05-29T09:50:31.000Z","dependencies_parsed_at":"2024-06-18T15:15:17.856Z","dependency_job_id":"118fa8c5-7926-4641-acbb-b5ef2d6da7b9","html_url":"https://github.com/kripod/react-polymorphic-types","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-polymorphic-types","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-polymorphic-types/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-polymorphic-types/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kripod%2Freact-polymorphic-types/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kripod","download_url":"https://codeload.github.com/kripod/react-polymorphic-types/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289428,"owners_count":20914464,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["as-prop","polymorphism","react","typescript"],"created_at":"2024-07-30T17:01:43.971Z","updated_at":"2025-04-05T05:06:55.013Z","avatar_url":"https://github.com/kripod.png","language":null,"readme":"# react-polymorphic-types\n\nZero-runtime polymorphic component definitions for React\n\n[![npm](https://img.shields.io/npm/v/react-polymorphic-types)](https://www.npmjs.com/package/react-polymorphic-types)\n\n## Motivation\n\nBeing a successor to [react-polymorphic-box](https://github.com/kripod/react-polymorphic-box), this project offers more accurate typings with less overhead.\n\n## Features\n\n- Automatic code completion, based on the value of the `as` prop\n- Static type checking against the associated component’s inferred props\n- HTML element name validation\n\n## Usage\n\nA `Heading` component can demonstrate the effectiveness of polymorphism:\n\n```tsx\n\u003cHeading color=\"rebeccapurple\"\u003eHeading\u003c/Heading\u003e\n\u003cHeading as=\"h3\"\u003eSubheading\u003c/Heading\u003e\n```\n\nCustom components like the previous one may utilize the package as shown below.\n\n```tsx\nimport type { PolymorphicPropsWithoutRef } from \"react-polymorphic-types\";\n\n// An HTML tag or a different React component can be rendered by default\nexport const HeadingDefaultElement = \"h2\";\n\n// Component-specific props should be specified separately\nexport type HeadingOwnProps = {\n  color?: string;\n};\n\n// Extend own props with others inherited from the underlying element type\n// Own props take precedence over the inherited ones\nexport type HeadingProps\u003c\n  T extends React.ElementType = typeof HeadingDefaultElement\n\u003e = PolymorphicPropsWithoutRef\u003cHeadingOwnProps, T\u003e;\n\nexport function Heading\u003c\n  T extends React.ElementType = typeof HeadingDefaultElement\n\u003e({ as, color, style, ...restProps }: HeadingProps\u003cT\u003e) {\n  const Element: React.ElementType = as || HeadingDefaultElement;\n  return \u003cElement style={{ color, ...style }} {...restProps} /\u003e;\n}\n```\n\n---\n\n⚠️ All the additional typings below will be deprecated as soon as [microsoft/TypeScript#30134](https://github.com/microsoft/TypeScript/issues/30134) is resolved.\n\n### With [`React.forwardRef`](https://reactjs.org/docs/react-api.html#reactforwardref)\n\n```tsx\nimport * as React from \"react\";\nimport type {\n  PolymorphicForwardRefExoticComponent,\n  PolymorphicPropsWithoutRef,\n  PolymorphicPropsWithRef\n} from \"react-polymorphic-types\";\nimport { HeadingDefaultElement, HeadingOwnProps } from \"./Heading\";\n\nexport type HeadingProps\u003c\n  T extends React.ElementType = typeof HeadingDefaultElement\n\u003e = PolymorphicPropsWithRef\u003cHeadingOwnProps, T\u003e;\n\nexport const Heading: PolymorphicForwardRefExoticComponent\u003c\n  HeadingOwnProps,\n  typeof HeadingDefaultElement\n\u003e = React.forwardRef(function Heading\u003c\n  T extends React.ElementType = typeof HeadingDefaultElement\n\u003e(\n  {\n    as,\n    color,\n    style,\n    ...restProps\n  }: PolymorphicPropsWithoutRef\u003cHeadingOwnProps, T\u003e,\n  ref: React.ForwardedRef\u003cElement\u003e\n) {\n  const Element: React.ElementType = as || HeadingDefaultElement;\n  return \u003cElement ref={ref} style={{ color, ...style }} {...restProps} /\u003e;\n});\n```\n\n### With [`React.memo`](https://reactjs.org/docs/react-api.html#reactmemo)\n\n```tsx\nimport * as React from \"react\";\nimport type { PolymorphicMemoExoticComponent } from \"react-polymorphic-types\";\nimport { Heading, HeadingDefaultElement, HeadingOwnProps } from \"./Heading\";\n\nexport const MemoizedHeading: PolymorphicMemoExoticComponent\u003c\n  HeadingOwnProps,\n  typeof HeadingDefaultElement\n\u003e = React.memo(Heading);\n```\n\n### With [`React.lazy`](https://reactjs.org/docs/react-api.html#reactlazy)\n\n```tsx\nimport * as React from \"react\";\nimport type { PolymorphicLazyExoticComponent } from \"react-polymorphic-types\";\nimport type { HeadingDefaultElement, HeadingOwnProps } from \"./Heading\";\n\nexport const LazyHeading: PolymorphicLazyExoticComponent\u003c\n  HeadingOwnProps,\n  typeof HeadingDefaultElement\n\u003e = React.lazy(async () =\u003e {\n  const { Heading } = await import(\"./Heading\");\n  return { default: Heading };\n});\n```\n","funding_links":["https://github.com/sponsors/kripod"],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Freact-polymorphic-types","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkripod%2Freact-polymorphic-types","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkripod%2Freact-polymorphic-types/lists"}