React HTML Attributes Store

1.4.6 · abandoned · verified Sun Apr 19

react-html-attributes is a JavaScript utility library that provides a programmatic store of HTML and SVG attributes understood by React, organized by their respective element tags. It includes global attributes accessible via a special '*' key and lists of supported HTML and SVG tags under an 'elements' key. The current stable version is 1.4.6, with the last release occurring in April 2018. This package is no longer actively maintained, meaning its data regarding React-supported attributes and elements is significantly outdated relative to contemporary React versions. While it once offered a direct way to access these lists, modern React development typically relies on explicit JSX attributes and React's internal handling, often making this package's utility superseded for new projects. It differentiates itself by providing a structured, static data set, rather than dynamic introspection or attribute validation.

Common errors

```
TypeError: require is not a function
```
cause Attempting to use `require()` in an ES module environment (e.g., a file with `"type": "module"` in `package.json` or a `.mjs` file).

fix Ensure your file is treated as CommonJS (e.g., `.js` without `"type": "module"` in `package.json` or `.cjs` file extension). Alternatively, if your environment supports it, use dynamic `import('react-html-attributes').then(...)` or refactor your project to handle CJS imports.
```
SyntaxError: Named export 'default' not found (module 'react-html-attributes' does not exist)
```
cause Attempting to `import htmlElementAttributes from 'react-html-attributes'` in an ES module environment when the package only offers CommonJS exports.

fix This package does not have a default export for ES Modules. If you must use it in an ESM context, you might need to use `import * as htmlElementAttributes from 'react-html-attributes';` (which might still require bundler configuration) or stick to `require()` in a CJS context.

Warnings

gotcha The data provided by this library for React-supported HTML and SVG attributes is significantly outdated. The last release was in April 2018 (v1.4.6), meaning many attributes added or changed in newer React versions (e.g., React 16.x, 17.x, 18.x) are not included. Using this with modern React may lead to missing attributes or incorrect assumptions.
Fix: Refer to the official React documentation (react.dev) for the most current list of supported DOM attributes and event handlers.
breaking This library is published as CommonJS (CJS) only. It does not provide an ES module (ESM) export. In modern JavaScript environments (e.g., Node.js with 'type: module' or contemporary frontend build setups that default to ESM), attempting to `import` this package directly will result in errors.
Fix: If using in an ESM environment, you must use `require` within a CommonJS module or configure your bundler (like Webpack or Rollup) to correctly handle CJS imports within an ESM project. For Node.js, consider dynamic import `import('react-html-attributes')` or use a CJS wrapper.
deprecated The package appears to be abandoned, with no updates since 2018. It is not recommended for new projects and may not be compatible with or relevant to current React development practices or API changes.
Fix: Avoid using this package for new development. For understanding React's attribute handling, consult the official React documentation directly.

Install

npm install react-html-attributes npm
yarn add react-html-attributes yarn
pnpm add react-html-attributes pnpm

Imports

htmlElementAttributes
wrong:
```
import htmlElementAttributes from 'react-html-attributes';
```
correct:
```
const htmlElementAttributes = require('react-html-attributes');
```
This library is CommonJS-only and does not support ES modules directly. Using 'import' will result in a runtime error in ESM environments.

Quickstart

Demonstrates how to import the library using CommonJS and access the global HTML attributes and SVG element lists.

const htmlElementAttributes = require('react-html-attributes');

// Access global React-supported HTML attributes
console.log('Global attributes:', htmlElementAttributes['*'].slice(0, 5));

// Access SVG element tags supported by React
console.log('SVG elements:', htmlElementAttributes['elements']['svg'].slice(0, 5));

// Example: Get attributes for a specific tag (e.g., 'div')
// Note: This library might not have keys for all specific tags if they only use global attributes.
// To illustrate, we'll check if a common HTML tag exists or fall back to global.
const divAttributes = htmlElementAttributes['div'] || htmlElementAttributes['*'];
console.log('Attributes for div (or global if not specific):', divAttributes.slice(0, 5));

view raw JSON →