# useModalContext

**Repository Path**: meshibo/use-modal-context

## Basic Information

- **Project Name**: useModalContext
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-28
- **Last Updated**: 2024-12-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# use-modal-context

一个用于 React 的模态框 Context Hook 库，提供了简单易用的 API 来管理模态框的状态。

## 安装

```bash
npm install use-modal-context
```

或者

```bash
yarn add use-modal-context
```

## 使用方法

```typescript
import { createModalContext } from "use-modal-context";

// 创建一个模态框context
const { Provider, useModal } = createModalContext<YourDataType>();

// 在父组件中使用Provider
function App() {
  return (
    <Provider>
      <YourComponents />
    </Provider>
  );
}

// 在子组件中使用useModal hook
function YourComponent() {
  const { isVisible, data, actions } = useModal();

  return (
    <div>
      <button onClick={() => actions.open(yourData)}>打开模态框</button>
      <Modal visible={isVisible} onClose={actions.close}>
        {/* 你的模态框内容 */}
      </Modal>
    </div>
  );
}
```

## API

### createModalContext<T>()

创建一个新的模态框 context，返回 Provider 组件和 useModal hook。

### useModal()

返回一个对象，包含：

- `isVisible`: boolean - 模态框是否可见
- `data`: T | null - 模态框的数据
- `actions`:
  - `open(data: T)`: 打开模态框并设置数据
  - `close()`: 关闭模态框
  - `setData(data: T)`: 更新模态框数据

## License

MIT