!ez-modal-scenario

ez modal react

The concept of EasyModal is simple: to treat the operations of modals as asynchronous events, managing their lifecycle through Promises. It also provides type inference and constraints.

English | 简体中文

✨ Feature

1. Based on Promise,In addition, there is no need to manage the switch status, which can reduce the tedious status management.
2. Supports return value type inference,elevate the development experience.
3. Small size(~1kb after gzip)、easy access non-intrusive、support any UI library.

🔨 Documentations

中文文档 | English

Example | codesandbox

📦 install

``shell


with yarn

yarn add ez-modal-react -S

or with npm

npm install ez-modal-react -S
`

🚀 Examples

1. use EasyModal Provider

`tsx
import EasyModal from 'ez-modal-react';

ReactDOM.render(
// wrap your main Componet


document.getElementById('root'),
);
`

2. create modal

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

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

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


{props.age}

{props.name}

));
`

3. anywhere use it

`tsx
// "The property 'age' is missing in the type '{ name: string; }'... ts(2345)"
const res = await EasyModal.show(InfoModal, { age: 10 });
console.log(res); // modal
``

Acknowledgement

1. fhd Inc @xpf
2. nice-modal-react
3. Thanks to SevenOutman (Doma) repository building support, I consulted his aplayer-react project

LICENSE

MIT

---