Ez Modal

This is a easy-to-use modal state management of React. It use React’s context.

✨ Feature

1. Based on Promise, separate modal and ohter code.
2. Supports hook and props injection.
3. Supports return value type inference,elevate the development experience.
4. Supports >=React 16.8 version.
5. Supports config (When modal is hidden, Whether to remove and resolve by default)
6. Small size(~1kb after gzip)、easy access non-intrusive、support any UI library.

🔨 Let me see

📦 install

# with yarn
yarn add ez-modal-react

# or with npm
npm install ez-modal-react

🚀 Examples

1. use EasyModal Provider

import EasyModal from 'ez-modal-react';

function App() {/* ... */}

ReactDOM.render(
    <EasyModal.Provider> // wrap your main Componet
      <App />
    </EasyModal.Provider>
  document.getElementById('root'),
);

2. create modal

import easyModal from 'ez-modal-react';

const InfoModal = EazyModal.create((props) => (
  <Modal open={props.visible} onOk={props.hide} onCancel={props.hide}></Modal>
));

3. anywhere use it

import easyModal from 'ez-modal-react';
import InfoModal from './InfoModal';

EasyModal.show(InfoModal, { name: 'foo' }).then((resolve) => {
  console.log(resolve);
});

• That’s the core functionality，Here’s the better experience

☀️ More

1. Inferred the return value type

Your Component Props should extends InnerModalProps,to enable it to derive the correct return value type

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

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

export const InfoModal = EasyModal.create(
+ (props: Props) => {
  return (
    <Modal
      title="Hello"
      open={props.visible}
      onOk={() => {
+       props.hide(); //(property) hide: (result: 'modal') => void ts(2554)
      }}
      onCancel={() => {
+      props.hide(null); // accepts null as a parameter,this makes it not have to worry about type errors, which is great to use
      }}
    >
      <h1>{props.age}</h1>
    </Modal>
  );
});

+ // "The property 'age' is missing in the type '{ name: string; }'... ts(2345)"
EasyModal.show(InfoModal, { name: 'foo' }).then((resolve) => {
  console.log(resolve); // if everything is in order. we will get 'modal'
});

2. If you like to use hook

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

export const InfoModal = EasyModal.create((props: Props) => {
+  const modal = useModal<Props /* here */>();
   console.log(modal.props) // current component's props
+  modal.hide(); // (property) hide: (result: 'modal') => void ts(2554)

  return <Moda>/*...*/</Moda>;
});

3. config default

1. When the modal is hidden, it is remove by default.
2. When the modal is hidden, it is resolve by default.
3. Meet the vast majority of scenarios. EasyModal also provides a reject method.

• How to change the default behavior: pass in the third parameter in the open method.

EasyModal.open(Component, {},
+  config:{
+    resolveOnHide:false,
+    removeOnHide:false,
+  }
);

📚 API

const CreatedModal = EasyModal.create(Component); // create EasyModal Modal； return EasyModalHOC

const result = EasyModal.open(CreatedModal, Props); // open CreatedModal Modal； return promise

const ______ = EasyModal.hide(CreatedModal); // hide CreatedModal Modal； return undefined

props; // Within a component, EasyModal injects additional properties in addition to the user's own parameters

const modal = useModal(); // in CreatedModal useModal；return same as props

type props | modal :
 {
  id: string; // current Modal id
  visible: boolean; // current Modal open state
  hide: function; // hidden current Modal fn
  remove: function; // remove current Modal fn
  resolve: function;
  reject: function;
  ...
}

• About the difference between useModal and injected props

1. The props and useModal() return values obtained inside the component have the same properties and methods>
2. The ‘hide’ ‘resolve’ method of the useModal() return value does not have type inference by default like most hooks. You must explicitly pass the props type of the current component to the useModal method.

   btw, That’s exactly why I did this project, I like to use props directly, but nice-modal-react can’t provide it

use hook

🎮 Codesandbox Demo

Demo Link

⭐ source of inspiration

1. fhd Inc @xpf
2. nice-modal-react

LICENSE

MIT

GitHub

View Github