{"id":15491515,"url":"https://github.com/tcodes0/react-known-props","last_synced_at":"2025-04-22T19:21:43.317Z","repository":{"id":42211505,"uuid":"135773621","full_name":"tcodes0/react-known-props","owner":"tcodes0","description":"About 700 props React recognizes","archived":false,"fork":false,"pushed_at":"2023-01-06T01:45:34.000Z","size":2143,"stargazers_count":45,"open_issues_count":10,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-20T23:03:56.958Z","etag":null,"topics":["event","html","props","react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tcodes0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-02T00:06:09.000Z","updated_at":"2022-08-19T20:44:35.000Z","dependencies_parsed_at":"2023-02-05T02:02:07.890Z","dependency_job_id":null,"html_url":"https://github.com/tcodes0/react-known-props","commit_stats":null,"previous_names":["thomazella/react-known-props"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcodes0%2Freact-known-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcodes0%2Freact-known-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcodes0%2Freact-known-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tcodes0%2Freact-known-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tcodes0","download_url":"https://codeload.github.com/tcodes0/react-known-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250306629,"owners_count":21408929,"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":["event","html","props","react"],"created_at":"2024-10-02T07:54:09.006Z","updated_at":"2025-04-22T19:21:43.283Z","avatar_url":"https://github.com/tcodes0.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Known Props [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=About%20700%20props%20React%20recognizes\u0026url=https://github.com/thomazella/react-known-props\u0026via=thomazella9\u0026hashtags=developers,react,props,opensource)\n\n\u003cp\u003e\n  \u003ca href=\"https://travis-ci.org/Thomazella/react-known-props\"\u003e\u003cimg src=\"https://img.shields.io/travis/Thomazella/react-known-props/master.svg?style=flat-square\" alt=\"Build Status\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-known-props\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-known-props.svg?style=flat-square\" alt=\"Latest version\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/prettier/prettier\"\u003e\n    \u003cimg alt=\"code style: prettier\" src=\"https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-known-props\"\u003e\n    \u003cimg alt=\"downloads/month\" src=\"https://img.shields.io/npm/dt/react-known-props.svg?style=flat-square\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cbr/\u003e\n\n\nAbout 700 props React recognizes.\n\n- HTML \u0026 SVG props valid on any element (global props).\n- HTML \u0026 SVG element specific props.\n- ARIA props (includes `role`).\n- React event props.\n- React specific props.\n- Options you can set.\n\nHTML attributes and React Properties are mixed together, the rationale is that if react accepts the prop, we include it.\nsee [#25](https://github.com/Thomazella/react-known-props/issues/25) for more info\n\n## Install\n\ninstall with\n\n```sh\nyarn add react-known-props\n```\n\n```sh\nnpm i react-known-props\n```\n\nthen use with\n\n```js\nimport {\n  getAllProps,\n  getElementProps,\n  getEventProps,\n  getGlobalProps\n} from \"react-known-props\";\n```\n\n```js\nconst {\n  getAllProps,\n  getElementProps,\n  getEventProps,\n  getGlobalProps\n} = require(\"react-known-props\");\n```\n\n## API\n\n### Functions provided\n\n- [getAllProps](#getallprops)\n- [getElementProps](#getelementprops)\n- [getEventProps](#geteventprops)\n- [getGlobalProps](#getglobalprops)\n\n**All functions return the props as strings in an array.**\n\n**Element names are case-sensitive**\u003cbr/\u003e\n\n- HTML elements are all lowercase\n- SVG elements are lowercase and camelCase\n\n**See options [below](#options).**\n\n### getAllProps\n\nGets all possible props: Global props, element specific props, event props and ARIA props including `role`.\n\n```js\n// argument 1 (optional): an options object.\n\ngetAllProps();\ngetAllProps({ legacy: true });\n\n// this\ngetAllProps().length;\n\n// returns\n675;\n```\n\n### getElementProps\n\nGets all props valid on the HTML/SVG element provided as argument, plus all ARIA props, including `role`. Doesn't include event props.\n\n```js\n// argument 1: string. Element to get props for.\n// argument 2: (optional) an options object.\n\ngetElementProps(\"img\")\ngetElementProps(\"iframe\")\ngetElementProps(\"ellipse\")\ngetElementProps(\"table\", {legacy: true})\ngetElementProps(\"audio\", {onlyReact: true})\ngetElementProps(\"polygon\", {onlyReact: true})\n\n// this\ngetElementProps(\"img\")\n\n// returns\n[ 'align',\n      'alt',\n      'crossOrigin',\n      'crossorigin',\n      'height',\n      'isMap',\n      'ismap',\n      'sizes',\n      (...)\n]\n```\n\n### getEventProps\n\nGets React's event props only.\n\n```js\n// arguments: none.\n\n// this\ngetEventProps()\n\n// returns\n[ 'onBlur',\n      'onChange',\n      'onClick',\n      'onContextMenu',\n      'onCopy',\n      'onCut',\n      (...)\n]\n```\n\n### getGlobalProps\n\nGets all HTML and SVG props valid on any element, plus all ARIA props including `role`.\n\n```js\n// argument 1 (optional): an options object.\n\ngetGlobalProps()\ngetGlobalProps({onlyReact: true})\n\n// this\ngetGlobalProps()\n\n// returns\n[\n  'accessKey',\n  'accesskey',\n  'autoCapitalize',\n  'autocapitalize',\n  'className',\n  'class',\n  'contentEditable',\n  'contenteditable',\n  (...)\n]\n```\n\n### Options\n\n- **[legacy](#legacy)**: boolean.\n- **[onlyReact](#onlyreact)**: boolean.\n- **[sort](#sort)**: boolean.\n\n#### legacy\n\n_Default: false._\n\nWhether or not to return deprecated HTML props `bgcolor`, `border` and `color` for the elements that still use them.\n\n```js\n// examples:\n\n// will include bgcolor in the props\ngetAllProps({ legacy: true });\n\n// will omit legacy props\ngetAllProps({ legacy: false });\n\n// same as {legacy: false}\ngetAllProps();\n```\n\n#### onlyReact\n\n_Default: false._\n\nWhether to return only the React prop, or the HTML prop and the React prop.\nIn React, some HTML props are renamed to camelCase (e.g. `class` -\u003e `className`) and using the HTML lowercase name will show a warning.\nThe same happens with SVG.\nSince the warning can be educational this option is off by default.\n\n```js\n// examples:\n\n// will include class and className, for and htmlFor, etc...\ngetElementProps(\"label\");\n\n// same as above\ngetElementProps(\"label\", { onlyReact: false });\n\n// no duplication, only React props are returned (itemID, tabIndex, autoCapitalize, className, htmlFor, etc...)\ngetGlobalProps({ onlyReact: true });\n```\n\n#### sort\n\n_Default: false\\*._\n\nSort the props alphabetically before returning them.\nIt uses `Array.prototype.sort`.\u003cbr/\u003e\n\\*Not supported on [getEventProps](#geteventprops).\nPlease sort it manually.\n\n```js\n// examples:\n\ngetAllProps();\n// not sorted\n[\n  (...)\n  'aria-valuetext',\n  'role',\n  'accessKey',\n  'accesskey',\n  'autoCapitalize',\n  'autocapitalize',\n  'className',\n  'class',\n  (...)\n]\n\n// sorted\ngetAllProps({ sort: true });\ngetGlobalProps({ sort: true });\n```\n\n_Incompatible SVG props not included._\n\nReact doesn't like all SVG props, some prevent it from compiling and print an error to the console.\nThey are:\n\n- Props prefixed by `xml:`\n- Props prefixed by `xlink:`\n- Props prefixed by `on` (events)\n- `ev:event`\n\n_Need more props?_\n\nI'd use these packages:\n\n- Void HTML elements (self closing, e.g. \\\u003cimg\\/\\\u003e): `yarn add void-elements`\n- Css props: `yarn add known-css-properties`\n\n### Contributing\n\nFork, make changes, run the `build:lists` script and send a PR.\n`build:lists` takes the stuff in `src/generator` and makes the files in `src/generated`.\nThis is for performance reasons.\n\nAll data pulled from MDN web docs, official React docs, the ARIA specification and SVG specification.\nMDN can be a deep website to dig for info, I'm sure there are more props (specially legacy) waiting to be added by someone willing to look into every element page.\n\n⚛️ React is awesome 💫\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcodes0%2Freact-known-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftcodes0%2Freact-known-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftcodes0%2Freact-known-props/lists"}