README.zh-CN.md

EasyModal

​EasyModal 的理念很简单：将模态框的操作视为异步事件，通过 Promise 管理其生命周期。并且提供类型推导和约束。

简体中文 | English

✨ 特性

1. 基于 Promise 封装，灵活易用可减少繁琐的状态管理。
2. >=React 16.8，支持 返回值类型推导，和类型校验。
3. 体积小(~1kb gzip)、易接入、无入侵性、支持任意 UI 库。

🔨 Documentations

中文文档 | English

Example | codesandbox

📦 安装

# with yarn
yarn add ez-modal-react -S

# or with npm
npm install ez-modal-react -S

🚀 使用方式

1. 使用 Provider

import EasyModal from 'ez-modal-react';

ReactDOM.render(
    <EasyModal.Provider> // 包裹应用
      <YourApp />
    </EasyModal.Provider>
  document.getElementById('root'),
);

2. 创建弹窗组件

import EasyModal, { InnerModalProps } from 'ez-modal-react';

interface IProps extends InnerModalProps<'modal'> {
  age: number;
  name: string;
}

const InfoModal = EazyModal.create((props: IProps) => (
  <Modal
    open={props.visible}
    //(property) hide: (result: 'modal') => void ts(2554)
    onOk={() => props.hide('modal')}
    onCancel={() => props.hide(null)}
    afterClose={props.remove}
  >
    <h1>{props.age}</h1>
    <h1>{props.name}</h1>
  </Modal>
));

3. 在任何地方使用

// 类型 "{ name: string; }" 中缺少属性 "age"，但类型 "ModalProps<Props, "modal">" 中需要该属性。
const res = await EasyModal.show(InfoModal, { name: 'foo' });
console.log(res); // type res:'modal'

鸣谢

1. 风火递 @xpf
2. nice-modal-react
3. 感谢SevenOutman (Doma) 仓库搭建的支持, 我借鉴与参考了他的 aplayer-react 项目。

LICENSE

MIT

---