# render-remote-component

> render remote component in vue or react

Latest version **1.1.0** (published 2024-04-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install render-remote-component
pnpm add render-remote-component
yarn add render-remote-component
bun add render-remote-component
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2024-04-17 |
| First published | 2023-06-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 172.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | mrbrick@yinhe.org |
| Maintainers | mrbrick |

## Links

- npm: https://www.npmjs.com/package/render-remote-component
- npm.io page: https://npm.io/package/render-remote-component

## Dependencies (2)

- [umd-module-loader](https://npm.io/package/umd-module-loader.md) ^1.0.2
- [transform-component](https://npm.io/package/transform-component.md) ^0.2.0

## Recent versions

- 1.1.0 (latest) — 2024-04-17
- 1.0.6 — 2024-02-29
- 1.0.5 — 2024-02-27
- 1.0.4 — 2024-02-22
- 1.0.3 — 2024-02-15
- 1.0.2 — 2024-02-01
- 1.0.1 — 2024-01-25
- 1.0.0 — 2024-01-24
- 0.1.23 — 2023-11-02
- 0.1.22 — 2023-10-18
- 0.1.20-1 — 2023-10-18
- 0.1.2-0.1 — 2023-10-18
- 0.1.21 — 2023-10-17
- 0.1.20 — 2023-10-09
- 0.1.19 — 2023-09-28
- … 19 more at https://npm.io/package/render-remote-component/versions

## README

# render-remote-component - 渲染远程的vue2/vue3/react组件

## 用法
### 在vue2、vue3中使用
```xml
<template>
  <RenderRemoteComponent
    :remoteOptions="remoteOptions"
    v-bind="componentProps"
  />
</template>
```

```js
import {inVue as RenderRemoteComponent} from 'render-remote-component'
export default {
  components: {
    RenderRemoteComponent,
  },
  data() {
    return {
      remoteOptions: {
        // 组件名称
        name: 'xxx',
        // 用于渲染的沙箱模式 - 可选项为 false|iframe|shadow
        sandbox: 'shadow',
      },
      componentProps: {
        id: 'aaa'
      },
    }
  },
}
```
或
```xml
<template>
  <RenderRemoteComponent
    remoteOptions="xxx?sandbox=shadow"
    v-bind="componentProps"
  />
</template>
```
```js
import {inVue as RenderRemoteComponent} from 'render-remote-component'
export default {
  components: {
    RenderRemoteComponent,
  },
  data() {
    return {
      componentProps: {
        id: 'aaa'
      },
    }
  },
}
```

### 在js中直接使用
```js
import {inDom as render} from 'render-remote-component'
const {setProps, dispose, refresh} = render('xxx?sandbox=shadow', document.body, {
  props: {
    id: 'aaa'
  }
})
```

### 在vue2、vue3中重置加载状态及错误状态的方法
```js
// 全局重置渲染加载状态的方式 - 将渲染方法挂载在组件实例上
RenderRemoteComponent.methods.renderLoading = function() {
  return this.h2('center', '加载中')
}
RenderRemoteComponent.methods.renderError = function(error) {
  return this.h2('center', '组件加载失败')
}
```
或
```js
// 临时重置渲染加载状态的方式 - 将渲染方法在remoteOptions上传递
const remoteOptions = {
  renderLoading() {
    return this.h2('center', '加载中')
  }
  renderError(error) {
    return this.h2('center', '组件加载失败')
  }
}
```

---
_Source: https://npm.io/package/render-remote-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._