{"id":16151553,"url":"https://github.com/justinmahar/react-html-props","last_synced_at":"2025-04-04T09:06:46.996Z","repository":{"id":65412058,"uuid":"368922074","full_name":"justinmahar/react-html-props","owner":"justinmahar","description":"⚛️ Convenient TypeScript types for all React HTML props.","archived":false,"fork":false,"pushed_at":"2025-02-18T02:14:19.000Z","size":8390,"stargazers_count":65,"open_issues_count":1,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-28T08:04:55.754Z","etag":null,"topics":["html","props","react","typescript"],"latest_commit_sha":null,"homepage":"https://justinmahar.github.io/react-html-props/","language":"TypeScript","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/justinmahar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","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":"justinmahar","custom":"https://www.paypal.com/paypalme/thejustinmahar/5"}},"created_at":"2021-05-19T15:46:54.000Z","updated_at":"2025-03-18T23:17:28.000Z","dependencies_parsed_at":"2024-02-09T01:23:20.576Z","dependency_job_id":"13234957-c026-4968-8ca6-ac746668460a","html_url":"https://github.com/justinmahar/react-html-props","commit_stats":{"total_commits":92,"total_committers":2,"mean_commits":46.0,"dds":"0.010869565217391353","last_synced_commit":"6f67bb45292d05f62101f76b3377758d7b8dcef8"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":"justinmahar/react-kindling","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Freact-html-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Freact-html-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Freact-html-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/justinmahar%2Freact-html-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/justinmahar","download_url":"https://codeload.github.com/justinmahar/react-html-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247149500,"owners_count":20891954,"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":["html","props","react","typescript"],"created_at":"2024-10-10T00:57:50.643Z","updated_at":"2025-04-04T09:06:46.976Z","avatar_url":"https://github.com/justinmahar.png","language":"TypeScript","funding_links":["https://github.com/sponsors/justinmahar","https://www.paypal.com/paypalme/thejustinmahar/5","https://paypal.me/thejustinmahar/5","https://paypal.me/thejustinmahar/15","https://paypal.me/thejustinmahar/25"],"categories":[],"sub_categories":[],"readme":"\u003ch2 align=\"center\"\u003e\n  ⚛️ React HTML Props\n\u003c/h2\u003e\n\u003ch3 align=\"center\"\u003e\n  Convenient TypeScript types for all React HTML props.\n\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://badge.fury.io/js/react-html-props\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://badge.fury.io/js/react-html-props.svg\" alt=\"npm Version\" /\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://github.com/justinmahar/react-html-props/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/GitHub-Source-success\" alt=\"View project on GitHub\" /\u003e\u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://github.com/justinmahar/react-html-props/actions?query=workflow%3ADeploy\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://github.com/justinmahar/react-html-props/workflows/Deploy/badge.svg\" alt=\"Deploy Status\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- [lock:donate-badges] 🚫--------------------------------------- --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://paypal.me/thejustinmahar/5\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?label=Buy%20me%20a%20coffee\u0026message=%E2%9D%A4\u0026logo=KoFi\u0026color=%23fe8e86\" alt=\"Buy me a coffee\" /\u003e\u003c/a\u003e\u0026nbsp;\u003ca href=\"https://github.com/sponsors/justinmahar\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/static/v1?label=Sponsor\u0026message=%E2%9D%A4\u0026logo=GitHub\u0026color=%23fe8e86\" alt=\"Sponsor\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- [/lock:donate-badges] ---------------------------------------🚫 --\u003e\n\n## Documentation\n\nRead the **[official documentation](https://justinmahar.github.io/react-html-props/)**.\n\n## Overview\n\nThis package includes convenient [TypeScript](https://www.typescriptlang.org/) type definitions for all React HTML props.\n\nFor example, this allows you to use the type `DivProps` instead of:\n\n```tsx\nReact.DetailedHTMLProps\u003cReact.HTMLAttributes\u003cHTMLDivElement\u003e, HTMLDivElement\u003e\n```\n\n...Because nobody wants to type all of that. 😁\n\nUsing these types makes it easy to support all standard HTML props, such as `style` and `className`, in your own components.\n\n### Features include:\n\n- **🧩 TypeScript types for all React HTML props**\n  - Easily use types for HTML props with simple names like `DivProps`.\n- **🧠 Easy to remember**\n  - All types start with the HTML element name, so you'll never end up scratching your head.\n- **👍 Optional types without React ref**\n  - Where needed, use `WithoutRef` types for props that don't inherit `ref` from `React.DetailedHTMLProps`.\n\n\u003c!-- [lock:donate] 🚫--------------------------------------- --\u003e\n\n## Donate \n\nIf this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!\n\n\u003ca href=\"https://github.com/sponsors/justinmahar\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/sponsor.png\" alt=\"Sponsor via GitHub\" height=\"35\" /\u003e\u003c/a\u003e\u0026nbsp; \u003ca href=\"https://paypal.me/thejustinmahar/5\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-1.png\" alt=\"Buy me a coffee\" height=\"35\" /\u003e\u003c/a\u003e\u0026nbsp; \u003ca href=\"https://paypal.me/thejustinmahar/15\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-3.png\" alt=\"Buy me 3 coffees\" height=\"35\" /\u003e\u003c/a\u003e\u0026nbsp; \u003ca href=\"https://paypal.me/thejustinmahar/25\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-5.png\" alt=\"Buy me 5 coffees\" height=\"35\" /\u003e\u003c/a\u003e\n\n\u003c!-- [/lock:donate] ---------------------------------------🚫 --\u003e\n\n## Table of Contents \n\n- [Documentation](#documentation)\n- [Overview](#overview)\n  - [Features include:](#features-include)\n- [Donate](#donate)\n- [Table of Contents](#table-of-contents)\n- [Installation](#installation)\n- [Quick Start](#quick-start)\n- [Unpacking Props](#unpacking-props)\n- [Extending HTML Props](#extending-html-props)\n- [Included HTML Element Props](#included-html-element-props)\n- [Props Without Ref](#props-without-ref)\n- [TypeScript](#typescript)\n- [Icon Attribution](#icon-attribution)\n- [Contributing](#contributing)\n- [⭐ Found It Helpful? Star It!](#-found-it-helpful-star-it)\n- [License](#license)\n\n## Installation\n\n```\nnpm i --save-dev react-html-props\n```\n\n## Quick Start\n\nLet's use `div` as an example since it's the most common.\n\nYou can use `DivProps` to support all props for `div` in your own components. \n\n```tsx\nimport { DivProps } from \"react-html-props\";\n\nconst MyComponent = (props: DivProps) =\u003e {\n  return \u003cdiv {...props}\u003e{props.children}\u003c/div\u003e;\n};\n```\n\n\u003e Note: `DivProps` is equivalent to `React.DetailedHTMLProps\u003cReact.HTMLAttributes\u003cHTMLDivElement\u003e, HTMLDivElement\u003e`\n\nIn this example, we're using `className`, `style`, and `onClick` on our own component since it supports all `div` props:\n\n```tsx\nconst render = () =\u003e (\n  \u003cMyComponent\n    className=\"text-center\"\n    style={{ background: 'blue', color: 'white' }}\n    onClick={() =\u003e console.log('Get schwifty!')}\n  \u003e\n    Show me what you got\n  \u003c/MyComponent\u003e\n);\n```\n\nTypes are available for all HTML props. See below for a table containing all supported types.\n\n## Unpacking Props\n\nWe can use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) and the [spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) to unpack props, such as `children`, from the rest of an element's props.\n\nUsing `div` as an example again:\n\n```tsx\nimport { DivProps } from \"react-html-props\";\n\nexport const MyComponent = ({ children, ...divProps }: DivProps): JSX.Element =\u003e {\n  return \u003cdiv {...divProps}\u003e{children}\u003c/div\u003e;\n};\n```\n\n## Extending HTML Props\n\nYou can extend all HTML props to add your own.\n\nThen use [object destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#object_destructuring) to unpack and use your own props.\n\nJust follow the example below:\n\n```tsx\ninterface KindleOfKittensProps extends DivProps {\n  kittenCount: 10;\n}\n\nexport const KindleOfKittens = ({ kittenCount, ...divProps }: KindleOfKittensProps): JSX.Element =\u003e {\n  return (\n    \u003cdiv {...divProps}\u003e\n      \u003ch1\u003eI have a kindle of {kittenCount} kittens\u003c/h1\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n(Yes, a group of kittens is called a \"kindle\")\n\n## Included HTML Element Props\n\nThe goal was to make it as easy to use each HTML element's props as possible, so the types for all props begin with the exact HTML element.\n\nFor example, the type for the `p` element's props is `PProps`. \n\nIn some cases there are multiple types available, such as with headings `h1`, `h2`, `h3`, etc. The props for these elements can be referenced either as `H1Props`, `H2Props`, `H3Props`, etc, or simply as `HeadingProps`. See the table below for more.\n\nYou can import any of the following types:\n\n| HTML Element         | Props Type To Use                 |\n| -------------------- | --------------------------------- |\n| `a`                  | `AProps`                          |\n| `abbr`               | `AbbrProps`                       |\n| `address`            | `AddressProps`                    |\n| `area`               | `AreaProps`                       |\n| `article`            | `ArticleProps`                    |\n| `aside`              | `AsideProps`                      |\n| `audio`              | `AudioProps`                      |\n| `b`                  | `BProps`                          |\n| `base`               | `BaseProps`                       |\n| `bdi`                | `BDIProps`                        |\n| `bdo`                | `BDOProps`                        |\n| `blockquote`         | `BlockQuoteProps`                 |\n| `body`               | `BodyProps`                       |\n| `br`                 | `BRProps`                         |\n| `button`             | `ButtonProps`                     |\n| `canvas`             | `CanvasProps`                     |\n| `caption`            | `CaptionProps`                    |\n| `cite`               | `CiteProps`                       |\n| `code`               | `CodeProps`                       |\n| `col`                | `ColProps`                        |\n| `colgroup`           | `ColGroupProps`                   |\n| `data`               | `DataProps`                       |\n| `datalist`           | `DataListProps`                   |\n| `dd`                 | `DDProps`                         |\n| `del`                | `DelProps`                        |\n| `details`            | `DetailsProps`                    |\n| `dfn`                | `DfnProps`                        |\n| `dialog`             | `DialogProps`                     |\n| `div`                | `DivProps`                        |\n| `dl`                 | `DLProps`                         |\n| `dt`                 | `DTProps`                         |\n| `em`                 | `EmProps`                         |\n| `embed`              | `EmbedProps`                      |\n| `fieldset`           | `FieldSetProps`                   |\n| `figcaption`         | `FigCaptionProps`                 |\n| `figure`             | `FigureProps`                     |\n| `footer`             | `FooterProps`                     |\n| `form`               | `FormProps`                       |\n| `h1`                 | `H1Props`, `HeadingProps`         |\n| `h2`                 | `H2Props`, `HeadingProps`         |\n| `h3`                 | `H3Props`, `HeadingProps`         |\n| `h4`                 | `H4Props`, `HeadingProps`         |\n| `h5`                 | `H5Props`, `HeadingProps`         |\n| `h6`                 | `H6Props`, `HeadingProps`         |\n| `head`               | `HeadProps`                       |\n| `header`             | `HeaderProps`                     |\n| `hgroup`             | `HGroupProps`                     |\n| `hr`                 | `HRProps`                         |\n| `html`               | `HtmlProps`                       |\n| `i`                  | `IProps`                          |\n| `iframe`             | `IFrameProps`                     |\n| `img`                | `ImgProps`                        |\n| `input`              | `InputProps`                      |\n| `ins`                | `InsProps`                        |\n| `kbd`                | `KbdProps`                        |\n| `label`              | `LabelProps`                      |\n| `legend`             | `LegendProps`                     |\n| `li`                 | `LIProps`                         |\n| `link`               | `LinkProps`                       |\n| `main`               | `MainProps`                       |\n| `map`                | `MapProps`                        |\n| `mark`               | `MarkProps`                       |\n| `menu`               | `MenuProps`                       |\n| `meta`               | `MetaProps`                       |\n| `meter`              | `MeterProps`                      |\n| `nav`                | `NavProps`                        |\n| `noscript`           | `NoScriptProps`                   |\n| `object`             | `ObjectProps`                     |\n| `ol`                 | `OLProps`                         |\n| `optgroup`           | `OptGroupProps`                   |\n| `option`             | `OptionProps`                     |\n| `output`             | `OutputProps`                     |\n| `p`                  | `PProps`                          |\n| `param`              | `ParamProps`                      |\n| `picture`            | `PictureProps`                    |\n| `pre`                | `PreProps`                        |\n| `progress`           | `ProgressProps`                   |\n| `q`                  | `QProps`                          |\n| `rp`                 | `RPProps`                         |\n| `rt`                 | `RTProps`                         |\n| `ruby`               | `RubyProps`                       |\n| `s`                  | `SProps`                          |\n| `samp`               | `SampProps`                       |\n| `script`             | `ScriptProps`                     |\n| `section`            | `SectionProps`                    |\n| `select`             | `SelectProps`                     |\n| `slot`               | `SlotProps`                       |\n| `small`              | `SmallProps`                      |\n| `source`             | `SourceProps`                     |\n| `span`               | `SpanProps`                       |\n| `strong`             | `StrongProps`                     |\n| `style`              | `StyleProps`                      |\n| `sub`                | `SubProps`                        |\n| `summary`            | `SummaryProps`                    |\n| `sup`                | `SupProps`                        |\n| `svg`                | `SVGProps`                        |\n| `table`              | `TableProps`                      |\n| `tbody`              | `TBodyProps`, `TableSectionProps` |\n| `td`                 | `TDProps`                         |\n| `template`           | `TemplateProps`                   |\n| `textarea`           | `TextAreaProps`                   |\n| `tfoot`              | `TFootProps`, `TableSectionProps` |\n| `th`                 | `THProps`                         |\n| `thead`              | `THeadProps`, `TableSectionProps` |\n| `time`               | `TimeProps`                       |\n| `title`              | `TitleProps`                      |\n| `tr`                 | `TRProps`                         |\n| `track`              | `TrackProps`                      |\n| `u`                  | `UProps`                          |\n| `ul`                 | `ULProps`                         |\n| `var`                | `VarProps`                        |\n| `video`              | `VideoProps`                      |\n| `wbr`                | `WBRProps`                        |\n| `webview`            | `WebViewProps`                    |\n| Generic HTML Element | `ElementProps`                    |\n\nFor any elements not listed above, use the generic `ElementProps`.\n\n## Props Without Ref\n\nYou may need props that exclude the `ref` field inherited from `React.DetailedHTMLProps`.\n\nFor this, all types have a `WithoutRef` option.\n\nFor example, you can use `DivPropsWithoutRef` for a `div` without a React `ref`. `DivPropsWithoutRef` is equivalent to `React.HTMLAttributes\u003cHTMLDivElement\u003e`.\n\n\u003e A `ref` may not always be desirable, so it remains optional to give you flexibility. For instance, components returned by [`styled-components`](https://styled-components.com/) may not support React's `ref` type.\n\n\u003c!-- [lock:typescript] 🚫--------------------------------------- --\u003e\n\n## TypeScript\n\nType definitions have been included for [TypeScript](https://www.typescriptlang.org/) support.\n\n\u003c!-- [/lock:typescript] ---------------------------------------🚫 --\u003e\n\n\u003c!-- [lock:icon] 🚫--------------------------------------- --\u003e\n\n## Icon Attribution\n\nFavicon by [Twemoji](https://github.com/twitter/twemoji).\n\n\u003c!-- [/lock:icon] ---------------------------------------🚫 --\u003e\n\n\u003c!-- [lock:contributing] 🚫--------------------------------------- --\u003e\n\n## Contributing\n\nOpen source software is awesome and so are you. 😎\n\nFeel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.\n\nFor major changes, open an issue first to discuss what you'd like to change.\n\n\u003c!-- [/lock:contributing] --------------------------------------🚫 --\u003e\n\n## ⭐ Found It Helpful? [Star It!](https://github.com/justinmahar/react-html-props/stargazers)\n\nIf you found this project helpful, let the community know by giving it a [star](https://github.com/justinmahar/react-html-props/stargazers): [👉⭐](https://github.com/justinmahar/react-html-props/stargazers)\n\n\u003c!-- [lock:support] 🚫--------------------------------------- --\u003e\nWant to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:\n\n\u003ca href=\"https://paypal.me/thejustinmahar/5\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-1.png\" alt=\"Buy me a coffee\" height=\"35\" /\u003e\u003c/a\u003e\u0026nbsp; \u003ca href=\"https://paypal.me/thejustinmahar/15\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-3.png\" alt=\"Buy me 3 coffees\" height=\"35\" /\u003e\u003c/a\u003e\u0026nbsp; \u003ca href=\"https://paypal.me/thejustinmahar/25\"\u003e\u003cimg src=\"https://justinmahar.github.io/react-kindling/support/coffee-5.png\" alt=\"Buy me 5 coffees\" height=\"35\" /\u003e\u003c/a\u003e\n\n\u003c!-- [/lock:support] ---------------------------------------🚫 --\u003e\n\n## License\n\nSee [LICENSE.md](https://justinmahar.github.io/react-html-props/?path=/docs/license--docs).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmahar%2Freact-html-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjustinmahar%2Freact-html-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjustinmahar%2Freact-html-props/lists"}