Package Exports

react-known-props

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-known-props) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Known Props

A list of all props React groks.

Html props valid on any element (I call them global).
Html element specific props.
Aria props (includes role).
React event props.
React specific props.
Options to control output.

Usage

install with

yarn add react-known-props

then use with

import { getAllProps, getElementProps, getEventProps, getGlobalProps } from 'react-known-props'

API

All functions return props as strings in an array.

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
304

getElementProps

Gets all props valid on the element provided as argument, plus all aria props, including role. Doesn't include event props.

// argument 1: string. Html element to get props for.
// argument 2: (optional) an options object.

getElementProps("img")
getElementProps("iframe")
getElementProps("table", {legacy: true})
getElementProps("audio", {onlyReact: true})

//this
getElementProps("img")

//returns
[ 'align',
      'alt',
      'crossOrigin',
      'crossorigin',
      'height',
      'isMap',
      'ismap',
      'sizes',
      (...)
]

getEventProps

Gets all React's event props only.

// arguments: none.

//this
getEventProps()

//returns
[ 'onBlur',
      'onChange',
      'onClick',
      'onContextMenu',
      'onCopy',
      'onCut',
      (...)
]

getGlobalProps

Gets all html 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 supported in an object:

legacy: boolean. Default: false.

Whether or not to return deprecated html props bgcolor, border and color for the elements that 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: boolean. Default: false.

Whether to return only the React version of a prop, or both versions. In React, some props are used in camelCase and using the classic lowercase name will show a warning. 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})

Need more props?

I'd use these packages:

svg props: yarn add svg-tag-names
void html elements (<img/>): yarn add void-elements
css props: yarn add known-css-properties

Contributing

All data pulled from MDN web docs, official React docs and the aria 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.

⚛️ React is awesome 💫