# @kne/global-context

> 提供一个全局唯一的context，用在多个webpack 邦联模块系统中，可以避免不同版本导致context获取问题

Latest version **1.3.2** (published 2025-12-19) · 0 weekly downloads

## Install

```sh
npm install @kne/global-context
pnpm add @kne/global-context
yarn add @kne/global-context
bun add @kne/global-context
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.3.2 |
| Published | 2025-12-19 |
| First published | 2023-05-08 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lingtong, yangwang123456, juliewang, metacoo |

## Links

- npm: https://www.npmjs.com/package/@kne/global-context
- npm.io page: https://npm.io/package/@kne/global-context

## Recent versions

- 1.3.2 (latest) — 2025-12-19
- 1.3.1 — 2025-12-19
- 1.3.0 — 2025-12-19
- 1.2.0 — 2025-06-11
- 1.1.3 — 2024-11-19
- 1.1.2 — 2024-11-12
- 1.1.1 — 2024-10-15
- 1.1.0 — 2024-10-11
- 1.0.0 — 2023-05-08
- 1.0.0-alpha.0 — 2023-05-08

## README

# global-context


### 描述

提供一个全局唯一的context，用在多个webpack 邦联模块系统中，可以避免不同版本导致context获取问题


### 安装

```shell
npm i --save @kne/global-context
```


### 概述

Global Context 是一个专为 React 应用设计的全局状态管理解决方案，特别适用于使用多个 Webpack 联邦模块的复杂项目架构。该项目通过提供全局唯一的 Context 实例，有效解决了不同模块版本间 Context 隔离的问题，确保跨模块组件间的数据共享和状态同步。

**核心特性**
- 提供全局唯一的 Context，支持跨模块数据共享
- 兼容 Webpack 联邦模块系统，避免版本冲突
- 内置选择器模式，优化组件渲染性能
- 支持异步数据加载和预设值配置
- 轻量级设计，无额外依赖，易于集成

**适用场景**
- 微前端架构中的跨应用状态管理
- 多模块联邦系统中的数据同步需求
- 需要全局配置信息共享的大型 React 项目
- 组件库与业务应用间的参数传递场景

**技术亮点**
采用 React 18 最新特性，基于 useSyncExternalStore 实现高效的状态订阅机制。通过 Context 隔离和选择器模式，在保证全局状态可访问性的同时，最大化减少了不必要的组件重渲染。项目设计遵循 React 最佳实践，提供完整的 TypeScript 类型支持，确保开发体验和代码质量。

### 示例

#### 示例代码

- 基础上下文
- 展示Provider和useContext的基本使用方法
- globalContext(@kne/current-lib_global-context)

```jsx
const {Provider, useContext} = globalContext;

const ChildrenComponent = () => {
    const value = useContext();
    return <div>context value: {JSON.stringify(value)}</div>;
};

const BaseExample = () => {
    return <Provider value={{a: 1}}>
        <div>我是一个示例组件</div>
        <ChildrenComponent/>
    </Provider>;
};

render(<BaseExample/>);

```

- 全局状态管理
- 使用Global组件管理全局状态，支持预设和异步加载
- globalContext(@kne/current-lib_global-context)

```jsx
const { Global, GlobalSetting, GlobalValue, Preset } = globalContext;

const BaseExample = () => {
  return <Global preset={{ a: 1 }}>
    <GlobalSetting loader={() => {
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve({ userName: "Linzp" });
        }, 1000);
      });
    }}>
      userName:<GlobalValue globalKey="userName">{({ value }) => value}</GlobalValue>
    </GlobalSetting>
    <Preset>{({ a }) => a}</Preset>
  </Global>;
};

render(<BaseExample />);

```

- 性能优化渲染
- 使用useGlobalValue避免不必要的组件重渲染
- globalContext(@kne/current-lib_global-context)

```jsx
const {Global, useGlobalValue, useContext} = globalContext;

const Children1Component = () => {
    console.log('children1 render');
    const value = useGlobalValue('a');
    return <div>context value.a: {value}</div>;
};

const Children2Component = () => {
    console.log('children2 render');
    const value = useGlobalValue('b');
    return <div>context value.b: {value}</div>;
};

const ChildrenSetValue = () => {
    const {setGlobalValue} = useContext();

    return <div>
        <button onClick={() => {
            setGlobalValue('a', a => a + 1);
        }}>a + 1
        </button>
        <button onClick={() => {
            setGlobalValue('b', b => b + 1);
        }}>b + 1
        </button>
    </div>
};

const BaseExample = () => {
    return <Global initValue={{a: 1, b: 2}}>
        <div>我是一个示例组件</div>
        <Children1Component/>
        <Children2Component/>
        <ChildrenSetValue/>
    </Global>;
};

render(<BaseExample/>);

```

- 多层级情况
- 多层级情况
- globalContext(@kne/current-lib_global-context)

```jsx
const {Global, useGlobalValue, useContext} = globalContext;

const ChildrenComponent = ({children}) => {
    const value = useGlobalValue('a');
    const value2 = useGlobalValue('b');
    console.log('ChildrenComponent render');
    return <div>
        context value.a: {value}
        <Global initValue={{a: value, b: value2}}>
            {children}
        </Global>
    </div>;
};

const SetGlobal = () => {
    const {setGlobal} = useContext();
    return <button onClick={() => {
        setGlobal(global => {
            return Object.assign({}, global, {a: global.a + 1});
        })
    }}>a + 1</button>
};

const BaseExample = () => {
    return <>
        <ChildrenComponent/>
        <Global initValue={{a: 1, b: 2}}>
            <ChildrenComponent>
                <ChildrenComponent/>
                <SetGlobal/>
            </ChildrenComponent>
            <SetGlobal/>
            <Global initValue={{a: 10, b: 20}}>
                <ChildrenComponent>
                    <ChildrenComponent/>
                    <SetGlobal/>
                </ChildrenComponent>
                <SetGlobal/>
            </Global>
        </Global>
    </>;
};

render(<BaseExample/>);

```


### API

### Global
全局状态管理组件，提供跨模块的数据共享能力。

#### 属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| preset | object | 否 | - | 预设配置数据 |
| children | ReactNode | 是 | - | 子组件 |
| initValue | object | 否 | {} | 初始全局状态值 |

### GlobalSetting
全局状态设置组件，支持异步数据加载。

#### 属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| loader | function | 是 | - | 异步加载函数，返回 Promise |
| needReady | boolean | 否 | true | 是否需要等待加载完成 |
| children | ReactNode | 是 | - | 子组件 |

### GlobalValue
全局状态值渲染组件，通过渲染函数模式获取状态值。

#### 属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| globalKey | string | 是 | - | 全局状态键名 |
| children | function | 是 | - | 渲染函数，接收 value 参数 |

### Preset
预设配置渲染组件，通过渲染函数模式获取预设值。

#### 属性说明
| 属性名 | 类型 | 必填 | 默认值 | 说明 |
|--------|------|------|--------|------|
| children | function | 是 | - | 渲染函数，接收 preset 参数 |

### createContext
创建 Context 实例的工具函数。

#### 返回值
| 属性名 | 类型 | 说明 |
|--------|------|------|
| context | Context | React Context 对象 |
| Provider | Component | Context Provider 组件 |
| Consumer | Component | Context Consumer 组件 |
| useContext | function | 获取 Context 值的 Hook |

### useSelectorContext
创建选择器 Context 的工具函数，支持细粒度状态订阅。

#### 返回值
| 属性名 | 类型 | 说明 |
|--------|------|------|
| context | Context | React Context 对象 |
| Provider | Component | 选择器 Provider 组件 |
| useContext | function | 选择器 Hook |

### useGlobalContext
获取全局 Context 值的 Hook。

#### 返回值
| 类型 | 说明 |
|------|------|
| object | 包含 global、setGlobal、setGlobalValue 的对象 |

### useGlobalValue
根据键名获取全局状态值的 Hook。

#### 参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| globalKey | string | 是 | 全局状态键名 |

#### 返回值
| 类型 | 说明 |
|------|------|
| any | 对应键名的全局状态值 |

### usePreset
获取预设配置值的 Hook。

#### 返回值
| 类型 | 说明 |
|------|------|
| object | 预设配置对象 |

### useSelectorContext
使用选择器订阅状态变化的 Hook。

#### 参数
| 参数名 | 类型 | 必填 | 说明 |
|--------|------|------|------|
| selector | function | 是 | 选择器函数 |

#### 返回值
| 类型 | 说明 |
|------|------|
| any | 选择器函数的返回值 |

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