react-strict-dom

React Strict DOM (RSD) standardizes 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.

Documentation

Please refer to the React Strict DOM website for detailed documentation. The API section includes detailed compatibility tables 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.

Quick start

Install

npm install react react-strict-dom

For web:

npm install react-dom

For native:

npm install react-native

Example

Styles are 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)
      ]}
    />
  );
}

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/stringish.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.

License

React Strict DOM is MIT licensed.