use-dom

Run web-only React libraries in Expo apps via the use dom directive.

Updated Aug 27, 2026

Search Tags:#javascript #react-native #expo #recharts #dom #webview

Ready to run

npx skills add https://github.com/tDalile/dotfiles --skill use-dom-tdalile

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: use-dom
Source: https://github.com/tDalile/dotfiles/tree/main/agents/skills/use-dom
Command: npx skills add https://github.com/tDalile/dotfiles --skill use-dom-tdalile

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It enables developers to reuse existing web‑only React libraries in Expo apps without rewriting them for native, by running the code in a webview on iOS and Android while rendering unchanged on the web.

Core Features & Use Cases

DOM Component Directive – Add a use dom directive at the top of a file to mark it as a DOM component.
Typed dom Prop – Receive a dom prop to configure the webview such as size and scrolling behavior.
Native‑to‑Web Bridge – Pass async functions as props so the web code can invoke native actions like alerts or data storage.
Full Web Library Support – Import and use any browser‑compatible npm library, for example recharts, syntax highlighters, rich text editors, iframes, or canvas graphics.
Use Cases – Embedding charts, syntax highlighting, rich editors, iframe content, or incrementally migrating existing web components to native.

Quick Start

Ask the assistant to generate a new DOM component file that displays a simple chart using the recharts library.

Frequently Asked Questions about use-dom

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I use web-only React libraries like recharts in an Expo React Native app?▼

You can render web-only React libraries in Expo React Native apps by using the use dom directive to create DOM components that run inside a webview on iOS and Android. This allows you to import browser-compatible npm packages like recharts directly into your native application.

Can I use web charts and syntax highlighting in React Native without rewriting the code?▼

Yes, web charts and syntax highlighting can run in React Native without rewriting code by using the use dom directive. This mechanism renders the browser-based UI inside a webview on native platforms while keeping the original web code unchanged.

How do I bridge native functionality to web components running in a React Native webview?▼

You bridge native functionality to web components by passing async functions as props. This allows the web code inside the webview to invoke native actions like alerts or data storage through async prop callbacks.

Does Expo DOM support any browser-compatible npm package for React Native?▼

Yes, Expo DOM supports any browser-compatible npm package. You can import and use libraries for charts, rich text editors, iframe content, or canvas graphics in your React Native application by marking the file with the use dom directive.

How do I configure webview rendering behavior for DOM components in React Native?▼

You configure webview rendering behavior for DOM components by receiving a typed dom prop. This prop allows you to specify settings such as the size and scrolling behavior of the webview on native platforms.

What is the best way to incrementally migrate existing web components to React Native?▼

The best way to incrementally migrate existing web components to React Native is using the use dom directive. It renders your browser-based UI in a webview on native platforms while rendering unchanged on the web, allowing a gradual transition without full rewrites.