# @alicloud/console-base-rc-messenger-resource-group

> ConsoleBase 组件 - 对 resource group messenger 的组件化封装，提升开发体验

Latest version **1.6.8** (published 2025-03-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install @alicloud/console-base-rc-messenger-resource-group
pnpm add @alicloud/console-base-rc-messenger-resource-group
yarn add @alicloud/console-base-rc-messenger-resource-group
bun add @alicloud/console-base-rc-messenger-resource-group
```

## Health

**Score 40/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.6.8 |
| Published | 2025-03-21 |
| First published | 2022-01-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 22.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jianchun Wang |
| Maintainers | jacksontian, fengmk2, pagecao, aliyunsdkteam, console-fe |

## Links

- npm: https://www.npmjs.com/package/@alicloud/console-base-rc-messenger-resource-group
- npm.io page: https://npm.io/package/@alicloud/console-base-rc-messenger-resource-group

## Dependencies (3)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21
- [@alicloud/console-base-log-sls](https://npm.io/package/@alicloud/console-base-log-sls.md) ^1.6.10
- [@alicloud/console-base-messenger-resource-group](https://npm.io/package/@alicloud/console-base-messenger-resource-group.md) ^1.2.8

## Recent versions

- 1.6.8 (latest) — 2025-03-21
- 1.6.8-beta.1 (beta) — 2025-03-17
- 1.2.1-alpha.1 (alpha) — 2022-07-27
- 1.6.8-beta.0 — 2025-03-17
- 1.6.7 — 2024-11-29
- 1.6.7-beta.0 — 2024-11-26
- 1.6.6 — 2024-10-28
- 1.6.6-beta.2 — 2024-10-25
- 1.6.6-beta.1 — 2024-10-25
- 1.6.6-beta.0 — 2024-10-15
- 1.6.5 — 2024-10-11
- 1.6.4 — 2024-10-11
- 1.6.3 — 2024-10-11
- 1.6.3-beta.0 — 2024-10-11
- 1.6.2 — 2024-10-10
- … 30 more at https://npm.io/package/@alicloud/console-base-rc-messenger-resource-group/versions

## README

# @alicloud/console-base-rc-messenger-resource-group

ConsoleBase 组件 - 对 resource group messenger 的组件化封装，提升开发体验

让控制台应用项操作本地组件一样，控制顶栏中的全局资源组选择器组件。

## INSTALL

```shell
npm  i -S @alicloud/console-base-rc-messenger-resource-group
```

## Usage

```tsx
import React, {
  useState
} from 'react';

import MessengerResourceGroup from '@alicloud/console-base-rc-messenger-resource-group';

export default function MyMessengerResourceGroup(): JSX.Element {
  // 默认 resurceGroupId 可以为空，也可以设置应用下支持的某个值
  // **注意**：
  // 
  // 1. 你也可以把值记录在应用的顶层 state 中，不一定需要 useState，但一定要有个地方记它
  // 2. 当路由中有 resurceGroupId 的话，需要设过来
  // 3. 这里只是一个例子，根据应用自己的需要修改
  const [stateResourceGroupId, setStateResourceGroupId] = useState<string>('');
  const handleResourceGroupChange = useCallback(resurceGroupId => {
    setStateResourceGroupId(resurceGroupId);
    // 这里写跳转路由逻辑
  }, [setStateResourceGroupId]);
  
  return <MessengerResourceGroup {...{
    // 数据
    resurceGroupId: stateResourceGroupId, // string 「半」受控的 resurceGroupId，需要通过 onChange 进行回填
    // resourceCount, // Record<string, number>
    // 展示
    // visible, // boolean
    // disabled, // boolean
    // noDefault, // boolean
    // 事件
    // onChange // (id: string, displayName: string, name: string) => void
  }} />;
}
```

注意：

1. 确保你页面同时只能有一个该组件的实例，否则可能引起奇怪的现象
2. 如果你初始化了该组件，表示你需要全局 ResourceGroup 切换，所以只要初始化，且 visible 不是 false，则顶栏 ResourceGroup 将可见
3. 该组件被销毁的时候，顶栏组件会隐藏

---
_Source: https://npm.io/package/@alicloud/console-base-rc-messenger-resource-group · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._