use-modal-context

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

安装

npm install use-modal-context

或者

yarn add use-modal-context

使用方法

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>
      {isVisible && (
        <Modal onClose={actions.close}>
          {/* 你的模态框内容 */}
        </Modal>
      )}
    </div>
  );
}

API

createModalContext()

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

useModal()

返回一个对象，包含：

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

License

MIT