# @alicloud/alfa-react

> Alfa Framework (React Version)

Latest version **2.1.0** (published 2026-08-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alicloud/alfa-react
pnpm add @alicloud/alfa-react
yarn add @alicloud/alfa-react
bun add @alicloud/alfa-react
```

## Health

**Score 55/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2026-08-06 |
| First published | 2020-11-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 218.8 KB |
| Known vulnerabilities | 0 (+23 in 1 direct dependencies) |
| Install scripts | yes |
| Author | pushiming |
| Maintainers | jacksontian, fengmk2, pagecao, aliyunsdkteam, console-fe |

## Links

- npm: https://www.npmjs.com/package/@alicloud/alfa-react
- npm.io page: https://npm.io/package/@alicloud/alfa-react

## Dependencies (12)

- [axios](https://npm.io/package/axios.md) ^0.21.4
- [events](https://npm.io/package/events.md) ^3.3.0
- [crypto-js](https://npm.io/package/crypto-js.md) ^4.1.1
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [prop-types](https://npm.io/package/prop-types.md) ^15.8.1
- [react-lazyload](https://npm.io/package/react-lazyload.md) ^3.2.1
- [@alicloud/alfa-core](https://npm.io/package/@alicloud/alfa-core.md) ^1.6.0
- [@alicloud/xconsole-context](https://npm.io/package/@alicloud/xconsole-context.md) ^2.4.32
- [@alicloud/console-os-loader](https://npm.io/package/@alicloud/console-os-loader.md) ^1.4.45
- [@alicloud/widget-utils-console](https://npm.io/package/@alicloud/widget-utils-console.md) ^0.1.6
- [@alicloud/console-base-messenger](https://npm.io/package/@alicloud/console-base-messenger.md) ^1.18.1

## Recent versions

- 2.1.0 (latest) — 2026-08-06
- 2.1.0-beta.9 (beta) — 2026-08-05
- 2.0.3-alpha.5 (alpha) — 2025-07-23
- 1.4.30-alpha.0 (canary) — 2023-03-15
- 1.0.1-next.0 (next) — 2021-02-08
- 1.8.0 — 2026-08-06
- 1.8.0-beta.12 — 2026-08-05
- 2.1.0-beta.8 — 2026-08-04
- 1.8.0-beta.11 — 2026-08-04
- 2.1.0-beta.7 — 2026-07-01
- 1.8.0-beta.10 — 2026-07-01
- 2.1.0-beta.6 — 2026-07-01
- 1.8.0-beta.9 — 2026-07-01
- 2.0.9 — 2026-06-30
- 1.7.6 — 2026-06-30
- … 219 more at https://npm.io/package/@alicloud/alfa-react/versions

## README

# Alfa (React Version)

标准微前端 API 的 React 版本，面向最终用户。

# Usage

创建 Alfa 微应用

```javascript
import { createAlfaWidget, createAlfaApp } from '@alicloud/alfa-react';

const AlfaMicroApp = createAlfaWidget({
  name: '@ali/example',
  version: '1.0'
});


const App = () => {
  return <AlfaMicroApp />
}
```

创建历史 Widget

```javascript
import { createAlfaWidget } from '@alicloud/alfa-react';

const AlfaWidget = createAlfaWidget({
  name: '@ali/example',
  version: '1.x'
});


const App = () => {
  return <AlfaWidget />
}
```

```javascript
import { createAlfaWidget } from '@alicloud/alfa-react';

const AlfaWidget = createAlfaWidget({
  name: '@ali/example',
  url: 'https://some-url/index.js',
  runtimeVersion: '1.9.3',
  env: 'pre'
});


const App = () => {
  return <AlfaWidget />
}
```

# API

```createAlfaWidget(AlfaFactoryOption)``` or ```createAlfaApp(AlfaFactoryOption)```

## AlfaFactoryOption

| 属性名         | 类型                                       | 说明                    | 默认值    |
| ------------- | ------------------------------------------ | ---------------------- | --------- |
| name            | `id: string;`                              | widget or alfa app ID  | -  |
| version       | `version?: string;`                         | 微应用版本               | -  |
| env           | `env?: 'prod' | 'local' | 'pre' | 'daily'` | 当前环境                 | -  |
| loading       | `loading?: boolean | React.ReactChild;`    | 微应用加载的 loading 展示 | -  |
| url           | ```url?: string;```                        | JS entry 的 URL         | - |
| manifest      | ```url?: string;```                   | ConsoleOS 的 manifest         | - |

## WidgetFactoryOption

```createAlfaWidget(WidgetFactoryOption)```

| 属性名         | 类型                                       | 说明                    | 默认值    |
| ------------- | ------------------------------------------ | ---------------------- | --------- |
| name            | `id: string;`                              | widget or alfa app ID  | -  |
| version       | `version: string;`                         | 微应用版本               | -  |
| env           | `env?: 'prod' | 'local' | 'pre' | 'daily'` | 当前环境                 | -  |
| loading       | `loading?: boolean | React.ReactChild;`    | 微应用加载的 loading 展示 | -  |
| url           | ```url?: string;```                        | JS entry 的 URL         | - |
| runtimeVersion| ```runtimeVersion?: string;```             | Widgtet runtime 版本     | - |

## widgetEventEmitter

```javascript
import { widgetEventEmitter } from '@alicloud/alfa-react'; 

widgetEventEmitter.on('event', handleEvent)

widgetEventEmitter.emit('event', [a, b])
```

---
_Source: https://npm.io/package/@alicloud/alfa-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._