react-strict-dom

React Strict DOM (RSD) is an experimental integration of React DOM and StyleX that aims to improve and standardize the development of styled React components for web and native. The goal of RSD is to improve the speed and efficiency of React development without compromising on performance, reliability, or quality. Building with RSD is helping teams at Meta ship features faster, to more platforms, with fewer engineers.

Use

Install

npm install react-strict-dom

Import

import { css, html } from 'react-strict-dom';

For web

npm install react react-dom
npm install --dev @stylexjs/babel-plugin

Configure the importSources option for the StyleX Babel plugin or equivalent bundler integration.

// babel.config.dom.js

import styleXBabelPlugin from '@stylexjs/babel-plugin';

module.exports = function () {
  return {
    plugins: [
      styleXBabelPlugin({
        importSources: [
          { from: 'react-strict-dom', as: 'css '}
        ]
      })
    ]
  }
};

Optionally use the RSD optimizing Babel plugin for improved runtime performance.

// babel.config.dom.js

import rsdPlugin from 'react-strict-dom/babel';
import styleXBabelPlugin from '@stylexjs/babel-plugin';

module.exports = function () {
  return {
    plugins: [
      rsdPlugin,
      styleXBabelPlugin({
        importSources: [
          { from: 'react-strict-dom', as: 'css '}
        ]
      })
    ]
  }
};

For native

npm install react react-native

Examples

Styles are compiled by StyleX and passed to elements using the style prop. The style prop accepts an array of static and dynamic styles.

import { css, html } from 'react-strict-dom';

const styles = css.create({
  root: {
    marginBlock: '1rem'
  },
  cond: {
    borderWidth: '5px'
  },
  opacity: (value) => ({
    opacity: value
  })
})

export default function App(props) {
  const opacity = useOpacity();
  return (
    <html.div
      {...props}
      style={[
        styles.root,
        cond && styles.cond,
        styles.opacity(opacity)
      ]}
    />
  );
}

API

css

Cross-platform CSS styling via StyleX.

import { css } from 'react-strict-dom'

const styles = css.create({
  root: { ... }
})

html

Cross-platform HTML components. All elements include a minimal style reset to render with no default padding or margin. Text elements inherit font styles and headings are all the same size.

import { html } from 'react-strict-dom'

function App() {
  return (
    <html.main>
      <html.h1>h1</html.h1>
      <html.div />
    </html.main>
  )
}

Types

Strict versions of most React DOM types are exported from the package.

import type { StrictHTMLElement } from 'react-strict-dom';

function App() {
  return (
    <html.div ref={(node: StrictHTMLElement) => {}} />
  )
}

Other tips

Suppressing logs on React Native

RSD provides comprehensive runtime warnings and errors to inform developers of about prop and style incompatibilities on native. If there are certain logs that you wish to suppress, this can be done by configuring the React Native LogBox at the root of the native app. Messages follow a common structure, which allows for precise or general suppression. For example:

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
  // Specific errors
  '[error] React Strict DOM: css.keyframes() is not supported',
  // Specific warnings
  '[warn] React Strict DOM: unsupported prop "onInvalid"',
  '[warn] React Strict DOM: unsupported style value in "display:inline-flex"',
  // All warnings of a certain kind
  /[warn] React Strict DOM: unsupported style property .*/,
  // All warnings
  /[warn] React Strict DOM: .*/,
  // All logs
  /[log] React Strict DOM: .*/,
]);

Ignore logs as a last resort and create a task to fix logs that are ignored.

Adding Flow types for data-* props

Flow does not currently support typing arbitrary data-* props (#71). The workaround is to use a Flow libdef to define the data-* props used by your apps (or dependencies) via the ReactStrictDOMDataProps type. For example:

// flow-typed/react-strict-dom.js
declare type ReactStrictDOMDataProps = {
  'data-imgperflogname'?: string,
  'data-impression-id'?: number,
};

This is a temporary solution until Flow provides a built-in approach to handling data-* prop types. DO NOT use this workaround to define any non-data-* props.

Adding Flow types for translation strings

Certain prop values are typically user-facing strings, and these are defined within RSD as being of type Stringish - just a string. But when Flow doesn't know that a translation function produces strings at runtime, you can override the type of Stringish to account for this. For example, if using Meta's internationalization framework Fbt:

// flow-typed/react-strict-dom.js
declare type Stringish = string | Fbt;

This is the same approach used by React Native, so if you are already re-declaring Stringish it will work out-of-the-box with RSD.

Compatibility

Please see COMPATIBILITY.md for a detailed look at API compatibility for native. Please read the linked issues for details on the most significant issues, and register your interest (e.g., thumbsup reaction) in supporting these features on native platforms.

License

React Strict DOM is MIT licensed.