# createContext

创建 provide，用于注入子组件

## Usage

```ts
// demo.ts
export interface ProviderContextProps {
  prefixCls: Ref<string>;
}

const key: InjectionKey<ProviderContextProps> = Symbol();

function createProviderContext(context: AppProviderContextProps) {
  return createContext<ProviderContextProps>(key, context);
}
function useProviderContext() {
  return useContext<AppProviderContextProps>(key);
}
```

```vue
<script setup lang="ts">
  import { InjectionKey, Ref } from 'vue';
  import { createContext } from '@eciol/hooks';
  import { createProviderContext } from './demo.ts';

  createProviderContext({
    prefixCls: ref('eci'),
  });
</script>
```

## Type Declarations

```ts
interface CreateContextOptions {
  /**
   * @description 注入的变量是否
   * @default false
   */
  writeable?: boolean;
  /**
   * @description 数据是否需要具有反应性
   * @default true
   */
  reactiveable?: boolean;
}

declare function createContext<T>(
  key: InjectionKey<T> | undefined,
  context: any,
  options?: CreateContextOptions
): void;
```

# useContext

子组件中使用上级组件注入的变量

## Usage

```vue
<script setup lang="ts">
  import { InjectionKey, Ref } from 'vue';
  import { useContext } from '@eciol/hooks';
  import { useProviderContext } from './demo.ts';

  const data = useProviderContext();
  console.log('data: ', data);
</script>
```

## Type Declarations

```ts
declare function useContext<T>(key: InjectionKey<T>, native?: boolean): T;
```