a easy modal state manager for React.
npm install ez-modal-reactThe 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 | 简体中文
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.
``shellwith yarn
yarn add 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
``1. fhd Inc @xpf
2. nice-modal-react
3. Thanks to SevenOutman (Doma) repository building support, I consulted his aplayer-react project
---