About 700 props React recognizes.
- HTML & SVG props valid on any element (global props).
- HTML & SVG element specific props.
- ARIA props (includes
role
). - React event props.
- React specific props.
- Options you can set.
HTML attributes and React Properties are mixed together, the rationale is that if react accepts the prop, we include it. see #25 for more info
install with
yarn add react-known-props
npm i react-known-props
then use with
import {
getAllProps,
getElementProps,
getEventProps,
getGlobalProps
} from "react-known-props";
const {
getAllProps,
getElementProps,
getEventProps,
getGlobalProps
} = require("react-known-props");
All functions return the props as strings in an array.
Element names are case-sensitive
- HTML elements are all lowercase
- SVG elements are lowercase and camelCase
See options below.
Gets all possible props: Global props, element specific props, event props and ARIA props including role
.
// argument 1 (optional): an options object.
getAllProps();
getAllProps({ legacy: true });
// this
getAllProps().length;
// returns
675;
Gets all props valid on the HTML/SVG element provided as argument, plus all ARIA props, including role
. Doesn't include event props.
// argument 1: string. Element to get props for.
// argument 2: (optional) an options object.
getElementProps("img")
getElementProps("iframe")
getElementProps("ellipse")
getElementProps("table", {legacy: true})
getElementProps("audio", {onlyReact: true})
getElementProps("polygon", {onlyReact: true})
// this
getElementProps("img")
// returns
[ 'align',
'alt',
'crossOrigin',
'crossorigin',
'height',
'isMap',
'ismap',
'sizes',
(...)
]
Gets React's event props only.
// arguments: none.
// this
getEventProps()
// returns
[ 'onBlur',
'onChange',
'onClick',
'onContextMenu',
'onCopy',
'onCut',
(...)
]
Gets all HTML and SVG props valid on any element, plus all ARIA props including role
.
// argument 1 (optional): an options object.
getGlobalProps()
getGlobalProps({onlyReact: true})
// this
getGlobalProps()
// returns
[
'accessKey',
'accesskey',
'autoCapitalize',
'autocapitalize',
'className',
'class',
'contentEditable',
'contenteditable',
(...)
]
Default: false.
Whether or not to return deprecated HTML props bgcolor
, border
and color
for the elements that still use them.
// examples:
// will include bgcolor in the props
getAllProps({ legacy: true });
// will omit legacy props
getAllProps({ legacy: false });
// same as {legacy: false}
getAllProps();
Default: false.
Whether to return only the React prop, or the HTML prop and the React prop.
In React, some HTML props are renamed to camelCase (e.g. class
-> className
) and using the HTML lowercase name will show a warning.
The same happens with SVG.
Since the warning can be educational this option is off by default.
// examples:
// will include class and className, for and htmlFor, etc...
getElementProps("label");
// same as above
getElementProps("label", { onlyReact: false });
// no duplication, only React props are returned (itemID, tabIndex, autoCapitalize, className, htmlFor, etc...)
getGlobalProps({ onlyReact: true });
Default: false*.
Sort the props alphabetically before returning them.
It uses Array.prototype.sort
.
*Not supported on getEventProps.
Please sort it manually.
// examples:
getAllProps();
// not sorted
[
(...)
'aria-valuetext',
'role',
'accessKey',
'accesskey',
'autoCapitalize',
'autocapitalize',
'className',
'class',
(...)
]
// sorted
getAllProps({ sort: true });
getGlobalProps({ sort: true });
Incompatible SVG props not included.
React doesn't like all SVG props, some prevent it from compiling and print an error to the console. They are:
- Props prefixed by
xml:
- Props prefixed by
xlink:
- Props prefixed by
on
(events) ev:event
Need more props?
I'd use these packages:
- Void HTML elements (self closing, e.g. <img/>):
yarn add void-elements
- Css props:
yarn add known-css-properties
Fork, make changes, run the build:lists
script and send a PR.
build:lists
takes the stuff in src/generator
and makes the files in src/generated
.
This is for performance reasons.
All data pulled from MDN web docs, official React docs, the ARIA specification and SVG specification. MDN 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.
โ๏ธ React is awesome ๐ซ