react-property
react-property is a packaged snapshot of React DOM's internal HTML and SVG property tables. It maps lowercase or hyphenated attribute spellings such as class, accept-charset, and stroke-width to React prop names; identifies data-* and aria-* custom attributes; and returns metadata describing whether a known prop is reserved, boolean, overloaded boolean, numeric, namespaced, URL-bearing, or assigned through a DOM property. It does not render React elements, parse HTML, sanitize values, or track the current React release automatically.
Useful as a narrow compatibility table when React 17-era behavior is exactly the target. Do not add it to a normal React app, and do not mistake its URL flags or custom-attribute regex for sanitization.
Use it if
- You are building an HTML-to-React converter and need React's historical attribute-to-prop casing table
- You need to inspect React DOM property metadata such as attributeName, namespace, type, or mustUseProperty
- You maintain a compatibility tool that intentionally targets the React 17-era property model bundled in version 2.0.2
- You want a dependency-free CommonJS data package instead of copying a private React source file into your project
- You expect current React 19 behavior: the 2.0.2 changelog says its breaking data update moved from React DOM 15 to React DOM 17, and no newer npm release has shipped since October 2023
- You only need to render React elements; React and react-dom already handle property names and DOM writes internally, so installing their copied internal table adds no value
- You need security sanitization: sanitizeURL and removeEmptyString are metadata flags, not functions that clean a URL, HTML string, style object, or untrusted attribute bag
- You need standards-oriented HTML and SVG metadata outside React; property-information tracks the unified and hast ecosystem rather than a copied React implementation detail
- You want precise TypeScript contracts: the bundled declaration types getPropertyInfo's input and return value as any, so consumers must define or narrow the record shape themselves
Setup reality
npm install react-property is the entire install. Version 2.0.2 has no runtime dependencies, native build, peer dependency, credential, or config file. The published package is CommonJS with lib/index.js as main and no exports or module field. Its README shows both require and a default ESM import, but named ESM imports are not part of the package metadata; use the default object or require when portability matters. Type declarations are included, yet getPropertyInfo accepts and returns any, while the exported numeric constants are literal types. The larger surprise is data freshness. The published changelog identifies React DOM 17 as the v2 baseline and the package has not been republished since 2023, even though the monorepo has newer source work in 2026. Test against the npm tarball, not the master branch. Normalize a raw attribute through possibleStandardNames before calling getPropertyInfo, because the lookup expects a React property name such as className or acceptCharset, not class or accept-charset. A null result does not prove an attribute is invalid; it can be a custom data/ARIA attribute, a newly standardized attribute missing from this snapshot, an event prop, or a typo. isCustomAttribute only checks the data-/aria- name pattern and even accepts an empty suffix, so it is not an accessibility validator. Never spread converted untrusted attributes into a React element without an allowlist and value sanitization. The package exposes React's policy data, not the policy implementation around it.
Patterns
Load the CommonJS export safelyload-package
import reactProperty from 'react-property';
const {
getPropertyInfo,
isCustomAttribute,
possibleStandardNames
} = reactProperty;The published package has a CommonJS main and no exports or module field. A default import matches the README; do not assume native named ESM exports.
Convert an HTML attribute spelling to a React propnormalize-attribute-name
function toReactProp(attributeName) {
return reactProperty.possibleStandardNames[attributeName.toLowerCase()]
?? attributeName;
}
toReactProp('class'); // 'className'
toReactProp('accept-charset'); // 'acceptCharset'
toReactProp('tabindex'); // 'tabIndex'Falling back to the original name preserves custom and newly standardized attributes, but it also preserves typos. Decide separately whether unknown names are allowed.
Inspect a normalized React propertyinspect-property
const propName = toReactProp('accept-charset');
const info = reactProperty.getPropertyInfo(propName);
console.log(info);
// {propertyName: 'acceptCharset', attributeName: 'accept-charset', ...}getPropertyInfo expects the React property name. Calling it with accept-charset or class returns null until you normalize the spelling.
Distinguish real and boolean-like attributesclassify-boolean
const {BOOLEAN, BOOLEANISH_STRING, getPropertyInfo} = reactProperty;
getPropertyInfo('disabled').type === BOOLEAN; // true
getPropertyInfo('contentEditable').type === BOOLEANISH_STRING; // trueBoolean-like strings serialize true and false as strings, while real boolean attributes are present or absent. Treating both categories identically changes DOM output.
Recognize overloaded boolean attributeshandle-overloaded-boolean
const {OVERLOADED_BOOLEAN, getPropertyInfo} = reactProperty;
const download = getPropertyInfo('download');
if (download?.type === OVERLOADED_BOOLEAN) {
// true means present without a value; a string supplies a filename.
}capture and download accept either a boolean flag or a string value. They are not equivalent to ordinary booleans.
Tell numeric and positive-numeric properties apartvalidate-numeric-kind
const {NUMERIC, POSITIVE_NUMERIC, getPropertyInfo} = reactProperty;
getPropertyInfo('rowSpan').type === NUMERIC; // true
getPropertyInfo('cols').type === POSITIVE_NUMERIC; // trueThe constants describe React's handling category; the package does not validate or coerce your input. Enforce finite and range rules in your own converter.
Find props React assigns as DOM propertiesdetect-property-assignment
const checked = reactProperty.getPropertyInfo('checked');
if (checked?.mustUseProperty) {
input[checked.propertyName] = true;
} else {
input.setAttribute(checked.attributeName, '');
}checked, multiple, muted, and selected use DOM property assignment in this snapshot. Direct DOM writers also need React's full removal and coercion rules, which this example does not reproduce.
Identify props React handles separatelyfilter-reserved-props
const {RESERVED, getPropertyInfo} = reactProperty;
function isReserved(name) {
return getPropertyInfo(name)?.type === RESERVED;
}
isReserved('children'); // true
isReserved('dangerouslySetInnerHTML'); // true
isReserved('style'); // trueReserved means React does not write the item as an ordinary DOM attribute. It does not mean the prop is safe to accept from untrusted input.
Recognize data and ARIA attribute syntaxcheck-custom-attribute
reactProperty.isCustomAttribute('data-user-id'); // true
reactProperty.isCustomAttribute('aria-live'); // true
reactProperty.isCustomAttribute('onclick'); // falseThis is only a name-pattern test. It does not validate real ARIA property names or values, and the current regex even accepts data- and aria- with an empty suffix.
Normalize SVG and namespaced attributesnormalize-svg-name
const name = toReactProp('xlink:href');
const info = reactProperty.getPropertyInfo(name);
console.log(name); // 'xlinkHref'
console.log(info.attributeName); // 'xlink:href'
console.log(info.attributeNamespace); // 'http://www.w3.org/1999/xlink'SVG names can be case-sensitive and namespaced. Use both attributeName and attributeNamespace if you are writing DOM nodes yourself.
Find values that require URL policyflag-url-properties
for (const propName of ['src', 'href', 'xlinkHref']) {
const info = reactProperty.getPropertyInfo(propName);
if (info?.sanitizeURL) {
console.log(`${propName} requires URL review`);
}
}sanitizeURL is a boolean marker copied from React internals. Calling getPropertyInfo does not sanitize javascript:, data:, credentials, redirects, or any other URL input.
Separate known, custom, and unknown namesaudit-attribute-bag
function classifyAttribute(rawName) {
const propName = toReactProp(rawName);
const info = reactProperty.getPropertyInfo(propName);
if (info) return {kind: 'known', propName, info};
if (reactProperty.isCustomAttribute(rawName)) {
return {kind: 'custom', propName: rawName};
}
return {kind: 'unknown', propName};
}Unknown can mean a typo, an event, or a valid attribute added after this React 17-era snapshot. Use an explicit allowlist before spreading results into React elements.
Alternatives
| Package | Registry | Pick it when |
|---|---|---|
| property-information | npm | You need maintained HTML and SVG property metadata for unified, hast, or standards-based transforms |
| react | npm | You are creating elements and can let React validate and normalize its own props |
| react-dom | npm | You need the actual current DOM renderer rather than a copied table from an older implementation |
| html-react-parser | npm | Your real task is converting an HTML string or DOM nodes into React elements |