---
name: "WebView"
mode: "component"
versionRequirements:
  - { name: "@ray-js/ray", version: "0.6.9" }
title: "WebView - Web page container"
---

## WebView

> [VERSION] @ray-js/ray >= 0.6.9

### Description

A container that hosts web pages; in Mini Programs it typically fills the entire page. When a page contains a web-view tag, other elements are not displayed, and you cannot apply any styles to it.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `src` | `string` | No | `""` | The URL loaded by webview. You must sign in to the Mini Program management console and configure the webview domain at Mini Program Details -> Development Settings -> Multi-zone Server Domains -> webview whitelisted domains. |
| `onError` | `(event: WebViewErrorEvent) => void` | No | - | Triggers when the page fails to load |
| `onLoad` | `(event: WebViewLoadEvent) => void` | No | - | Triggers when the page loads successfully |
| `onMessage` | `(event: WebViewMessageEvent) => void` | No | - | Triggers at specific times and delivers the messages when the page posts to the mini program (back navigation, component teardown, sharing) |
| `updateLayout` | `unknown` | No | - | Used for cross-layer components to notify the container layer to update styles |

### Referenced Types

##### `interface` WebViewErrorEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `WebViewErrorDetail` |  |

##### `interface` WebViewLoadEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `WebViewLoadDetail` |  |

##### `interface` WebViewMessageEvent

| Property | Type | Description |
| --- | --- | --- |
| `detail` | `WebViewMessageDetail` |  |

##### `interface` WebViewErrorDetail

| Property | Type | Description |
| --- | --- | --- |
| `url` | `string` | Web page URL |
| `fullUrl` | `string` | Full URL on load failure |
| `errMsg` | `string` | Error message |

##### `interface` BaseEvent

| Property | Type | Description |
| --- | --- | --- |
| `type` | `string` | Event type |
| `timeStamp` | `number` | Time in milliseconds since the page opened |
| `target` | `Target` | Source component of the event |
| `currentTarget` | `Target` | Collection of property values for the current component |
| `mark` | `any` | Event mark data |

##### `interface` WebViewLoadDetail

| Property | Type | Description |
| --- | --- | --- |
| `src` | `string` | Web page URL |

##### `interface` WebViewMessageDetail

| Property | Type | Description |
| --- | --- | --- |
| `data` | `unknown[]` | Array of parameters from multiple postMessage calls |

##### `interface` Target

| Property | Type | Description |
| --- | --- | --- |
| `id` | `string` | id of the event source component |
| `dataset` | `Record<string, unknown>` | Collection of custom attributes from the `dataset` on the event source component |


### Examples

#### Basic usage

```tsx
import React from 'react';
import { WebView, View } from '@ray-js/ray';

export default function () {
  return (
    <WebView
      src="https://www.tuya.com"
      onLoad={(e) => console.log('Page loaded:', e.detail.src)}
      onError={(e) => console.log('Page load failed:', e.detail)}
    />
  );
}
```


<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/rayWebView" 
  qrCodeUrl="/images/qrCode/rayWebView.png" 
  lang="en">
</DemoBlock>