React DOM Property Configuration

2.0.2 · active · verified Sun Apr 19

react-property is a utility package that exposes the internal HTML and SVG DOM property configurations used by React. It provides programmatic access to React's understanding of DOM properties, including their type (e.g., boolean, numeric, string), and a mapping of non-standard attribute names to their standard counterparts (e.g., `accept-charset` to `acceptCharset`). The package is currently stable at version 2.0.2 and appears to have an infrequent release cadence, primarily updating to align with significant changes in React's DOM handling, as seen with its v2.0.0 release. Its key differentiator is providing a direct mirror of React's internal DOM property logic, which can be useful for tools, linting, or custom renderers that need to replicate React's attribute normalization and property handling without relying on the full React DOM package.

Common errors

```
TypeError: react_property_1.getPropertyInfo is not a function
```
cause Attempting to use `getPropertyInfo` as a named import when it's a property of the default export.

fix Import the default export and access `getPropertyInfo` from it: `import reactProperty from 'react-property'; const { getPropertyInfo } = reactProperty;`
```
Property 'getPropertyInfo' does not exist on type 'typeof import("/path/to/node_modules/react-property/index")'.
```
cause Using an older version of `react-property` (pre-2.0.2) in a TypeScript project, where official types were not available, or incorrect type declarations are in use.

fix Upgrade to `react-property@2.0.2` or newer to get official TypeScript types. If an upgrade is not feasible, install community types like `@types/react-property` (if they exist for your version) or create a custom `d.ts` declaration file to assert the module's structure.

Warnings

breaking The 2.0.0 release introduced a breaking change by updating the internal property configuration from React DOM 15 to React DOM 17. This means applications built for older React versions (pre-17) might encounter incorrect property handling or unexpected behavior when upgrading to react-property v2.
Fix: Ensure your project's React version is 17 or newer if you are using react-property@2.x. If you require compatibility with React 15/16, you should remain on react-property@1.x.
gotcha TypeScript declaration files were only added in version 2.0.2. Prior versions (2.0.0, 2.0.1, and all 1.x versions) do not ship with official TypeScript types. Developers using TypeScript with older versions would need to rely on community-provided types or declare their own.
Fix: Upgrade to react-property@2.0.2 or higher for first-party TypeScript support. If sticking to older versions, consider installing `@types/react-property` if available, or create a custom declaration file.
gotcha This package mirrors internal React DOM logic. While useful, directly relying on deeply internal structures can be brittle. Future React updates might change these internals, potentially leading to discrepancies or unexpected behavior in `react-property` before it's updated.
Fix: Periodically check for updates to `react-property` when upgrading your React version. Consider the stability implications of relying on utilities that expose internal framework mechanisms.

Install

npm install react-property npm
yarn add react-property yarn
pnpm add react-property pnpm

Imports

reactProperty (default export)
wrong:
```
import { reactProperty } from 'react-property';
```
correct:
```
import reactProperty from 'react-property';
```
The primary export is a default object containing all utilities and constants.

getPropertyInfo

wrong:

import { getPropertyInfo } from 'react-property';

correct:

import reactProperty from 'react-property';
const { getPropertyInfo } = reactProperty;

`getPropertyInfo` is a property of the default export, not a named export directly from the module.

possibleStandardNames

wrong:

import { possibleStandardNames } from 'react-property';

correct:

import reactProperty from 'react-property';
const { possibleStandardNames } = reactProperty;

`possibleStandardNames` is an object property of the default export, not a named export directly.

Quickstart

Demonstrates importing the default export and using its `getPropertyInfo`, `isCustomAttribute`, and `possibleStandardNames` utilities, along with accessing its property type constants.

import reactProperty from 'react-property';

// Get information about a specific HTML property
const acceptCharsetInfo = reactProperty.getPropertyInfo('acceptCharset');
console.log('acceptCharset info:', acceptCharsetInfo); // Example: { type: 1, 'alias for': 'accept-charset' }

// Check if an attribute is a custom attribute
const isDataAttr = reactProperty.isCustomAttribute('data-my-custom-attr');
console.log('Is data-my-custom-attr custom?', isDataAttr); // true

// Get standard name for a non-standard attribute
const standardName = reactProperty.possibleStandardNames['accept-charset'];
console.log('Standard name for accept-charset:', standardName); // acceptCharset

// Access property types constants
console.log('BOOLEAN property type:', reactProperty.BOOLEAN);
console.log('STRING property type:', reactProperty.STRING);

view raw JSON →