Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tcodes0/react-known-props
About 700 props React recognizes
https://github.com/tcodes0/react-known-props
event html props react
Last synced: 27 days ago
JSON representation
About 700 props React recognizes
- Host: GitHub
- URL: https://github.com/tcodes0/react-known-props
- Owner: tcodes0
- License: bsd-3-clause
- Created: 2018-06-02T00:06:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T01:45:34.000Z (almost 2 years ago)
- Last Synced: 2024-10-03T07:54:05.409Z (about 1 month ago)
- Topics: event, html, props, react
- Language: JavaScript
- Homepage:
- Size: 2.04 MB
- Stars: 45
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React Known Props [](https://twitter.com/intent/tweet?text=About%20700%20props%20React%20recognizes&url=https://github.com/thomazella/react-known-props&via=thomazella9&hashtags=developers,react,props,opensource)
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](https://github.com/Thomazella/react-known-props/issues/25) for more info
## Install
install with
```sh
yarn add react-known-props
```
```sh
npm i react-known-props
```
then use with
```js
import {
getAllProps,
getElementProps,
getEventProps,
getGlobalProps
} from "react-known-props";
```
```js
const {
getAllProps,
getElementProps,
getEventProps,
getGlobalProps
} = require("react-known-props");
```
## API
### Functions provided
- [getAllProps](#getallprops)
- [getElementProps](#getelementprops)
- [getEventProps](#geteventprops)
- [getGlobalProps](#getglobalprops)
**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](#options).**
### getAllProps
Gets all possible props: Global props, element specific props, event props and ARIA props including `role`.
```js
// argument 1 (optional): an options object.
getAllProps();
getAllProps({ legacy: true });
// this
getAllProps().length;
// returns
675;
```
### getElementProps
Gets all props valid on the HTML/SVG element provided as argument, plus all ARIA props, including `role`. Doesn't include event props.
```js
// 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.
```js
// 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`.
```js
// argument 1 (optional): an options object.
getGlobalProps()
getGlobalProps({onlyReact: true})
// this
getGlobalProps()
// returns
[
'accessKey',
'accesskey',
'autoCapitalize',
'autocapitalize',
'className',
'class',
'contentEditable',
'contenteditable',
(...)
]
```
### Options
- **[legacy](#legacy)**: boolean.
- **[onlyReact](#onlyreact)**: boolean.
- **[sort](#sort)**: boolean.
#### legacy
_Default: false._
Whether or not to return deprecated HTML props `bgcolor`, `border` and `color` for the elements that still use them.
```js
// 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 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.
```js
// 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 });
```
#### sort
_Default: false\*._
Sort the props alphabetically before returning them.
It uses `Array.prototype.sort`.
\*Not supported on [getEventProps](#geteventprops).
Please sort it manually.
```js
// 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. \![]()
): `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 💫