mrkeyoor.com_
Sat 08 Aug 21:57 UTC
npmWeb Frontendupdated 08 Aug 2026

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.

Verdict

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.

API stability4/5Version 2 has kept the same small object export since 2021: seven numeric type constants, getPropertyInfo, isCustomAttribute, and possibleStandardNames. There are no dependencies or plugin contracts to shift underneath consumers. That apparent stability partly comes from infrequent publication, however, and the data is copied from React internals rather than a React public API. A future refresh to a newer React DOM table can change mappings and flags without the upstream project owing compatibility, just as v2 deliberately replaced the React 15 snapshot with React 17 data.
Docs2/5The package README accurately lists the exported object and shows CommonJS and default ESM loading, while tests cover reserved, boolean, numeric, namespaced SVG, URL, custom, and standard-name cases. It does not document the PropertyInfo record fields, the meaning of each numeric constant, correct normalization order, the React version actually represented, event-name omissions, or the security boundary around sanitizeURL. The generated declaration makes getPropertyInfo return any, so serious consumers must read the built source, tests, and changelog to understand how to use the table safely.
Maintenance3/5The containing repository was pushed on August 5, 2026 and its current package source, tests, Rollup build, ESLint setup, Jest setup, and TypeScript declaration build are being updated. The artifact users install is less current: npm still serves 2.0.2 from October 2023, and its last substantive data release says it updated the snapshot to React DOM 17. The repository reports only two open issues and pull requests, but that tiny queue and fresh monorepo commits do not remove the gap between unpublished source and the three-year-old registry package.
Ecosystem3/5react-property records 3,715,115 downloads for the measured week, which shows substantial transitive use in HTML-to-React and related tooling. Direct community signals are much smaller: the monorepo has four stars, the package offers no adapters or extensions, and its value is a copied internal table rather than an ecosystem platform. It fits existing converters that already depend on its exact shape, but new projects have stronger choices in property-information for standards metadata, html-react-parser for conversion, or React itself for rendering behavior.

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
Skip it if

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; // true

Boolean-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; // true

The 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');                   // true

Reserved 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');      // false

This 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

PackageRegistryPick it when
property-informationnpmYou need maintained HTML and SVG property metadata for unified, hast, or standards-based transforms
reactnpmYou are creating elements and can let React validate and normalize its own props
react-domnpmYou need the actual current DOM renderer rather than a copied table from an older implementation
html-react-parsernpmYour real task is converting an HTML string or DOM nodes into React elements