React inert value

Return a React inert prop value that works under both React 18 and React 19.

React 19 treats inert as a boolean attribute. React 18 does not know about inert and ignores inert={ true }, so the prop has to be the string 'true' instead. This package returns the value that the running React version will render as the inert HTML attribute.

Installation

Install the module

npm install @wordpress/react-inert-value --save

Usage

inertValue

import { inertValue } from '@wordpress/react-inert-value';

<div inert={ inertValue( true ) } />;

API

inertValue

Returns a value for the inert prop that the running version of React renders as the inert HTML attribute.

React 19 handles inert as a boolean attribute, while React 18 knows nothing about inert and ignores inert={ true }, so it has to be given the string 'true' instead.

The return type describes what React 19 types accept. React 18 doesn't support inert HTML attribute at all, so a TypeScript call site still needs a @ts-expect-error annotation.

Inspired by the helper of the same name in the Base UI library.

Parameters

• value boolean: Boolean value for the inert prop.

Returns

• boolean | undefined: The actual value to pass to the inert prop.

Contributing to this package

This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to npm and used by WordPress as well as other software projects.

To find out more about contributing to this package or Gutenberg as a whole, please read the project's main contributor guide.