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 to control output.

Install

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')

API

Functions provided

• getAllProps
• getElementProps
• getEventProps
• getGlobalProps

All functions return the props as strings in an array.

Element name are case-sensitive always.

See options object below.

getAllProps

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
674

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.

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',
      (...)
]

getEventProps

Gets React's event props only.

// arguments: none.

//this
getEventProps()

//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.

getGlobalProps()
getGlobalProps({onlyReact: true})

//this
getGlobalProps()

//returns
[ 'accessKey',
      'accesskey',
      'autoCapitalize',
      'autocapitalize',
      'className',
      'class',
      'contentEditable',
      'contenteditable',
      (...)
]

Options object

• legacy: boolean.
• onlyReact: boolean.

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
getAllProps({legacy: true})

// will omit legacy props
getAllProps({legacy: false})

// same as {legacy: false}
getAllProps()

onlyReact

Default: false.

Whether to return only the React name of a prop, or the HTML name and the React name. 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 names are returned (itemID, tabIndex, autoCapitalize, className, htmlFor, etc...)
getGlobalProps({onlyReact: 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

Contributing

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) waititing to be added by someone willing to look into every element page.

Just send PR's.

⚛️ React is awesome 💫