use-dom

Run web-only libraries in Expo apps by rendering them in webviews on native and as-is on web.

- Supports any React web library (recharts, react-syntax-highlighter, canvas, WebGL) without modification by wrapping it in a DOM component file with the 'use dom'; directive

- Passes serializable props and async functions from native to webview, enabling bidirectional communication between native and web contexts

- Includes webview configuration options via the dom prop: scroll control, safe area behavior, manual sizing, and style overrides

- Works with Expo Router navigation APIs; router state hooks require passing values as props from native parent components

- Renders in WKWebView on iOS, WebView on Android, and as standard React on web with identical code

What are DOM Components?

DOM components allow web code to run verbatim in a webview on native platforms while rendering as-is on web. This enables using web-only libraries like recharts, react-syntax-highlighter, or any React web library in your Expo app without modification.

When to Use DOM Components

Use DOM components when you need:

- Web-only libraries - Charts (recharts, chart.js), syntax highlighters, rich text editors, or any library that depends on DOM APIs

- Migrating web code - Bring existing React web components to native without rewriting

- Complex HTML/CSS layouts - When CSS features aren't available in React Native

- iframes or embeds - Embedding external content that requires a browser context

- Canvas or WebGL - Web graphics APIs not available natively

When NOT to Use DOM Components

Avoid DOM components when: