React Known Props
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
install with
yarn add react-known-props
npm i react-known-props
then use with
;
const getAllProps getElementProps getEventProps getGlobalProps } = ;
API
Functions provided
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.
getAllProps
Gets all possible props: Global props, element specific props, event props and ARIA props including role
.
// argument 1 (optional): an options object. ;; // thislength; // returns675;
getElementProps
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. // this // returns 'align' 'alt' 'crossOrigin' 'crossorigin' 'height' 'isMap' 'ismap' 'sizes' ...
getEventProps
Gets React's event props only.
// arguments: none. // this // returns 'onBlur' 'onChange' 'onClick' 'onContextMenu' 'onCopy' 'onCut' ...
getGlobalProps
Gets all HTML and SVG props valid on any element, plus all ARIA props including role
.
// argument 1 (optional): an options object. // this // returns 'accessKey' 'accesskey' 'autoCapitalize' 'autocapitalize' 'className' 'class' 'contentEditable' 'contenteditable' ...
Options
legacy
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; // will omit legacy props; // same as {legacy: false};
onlyReact
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...; // same as above; // no duplication, only React props are returned (itemID, tabIndex, autoCapitalize, className, htmlFor, etc...);
sort
Default: false*.
Sort the props alphabetically before returning them.
It uses Array.prototype.sort
.
*Not supported on getEventProps.
Please sort it manually.
// examples: ;// not sorted ... 'aria-valuetext' 'role' 'accessKey' 'accesskey' 'autoCapitalize' 'autocapitalize' 'className' 'class' ... // sorted;;
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
Contributing
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 💫