https://github.com/yet3/use-modal
React hook to make using modals easier
https://github.com/yet3/use-modal
Last synced: over 1 year ago
JSON representation
React hook to make using modals easier
- Host: GitHub
- URL: https://github.com/yet3/use-modal
- Owner: yet3
- License: mit
- Created: 2022-08-14T13:27:49.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-31T13:45:34.000Z (almost 4 years ago)
- Last Synced: 2025-03-23T03:32:14.726Z (over 1 year ago)
- Language: TypeScript
- Size: 98.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# useModal
React hook that makes using modals easier.
### Table of Contents
- [Installation](#installation)
- [Usage](#simple-usage)
- [Simple](#simple-usage)
- [With props](#with-props)
- [With modalWrapper](#with-modalwrapper)
- [Options](#options)
### Installation
```sh
yarn add @yet3/use-modal
```
or with npm
```sh
npm install @yet3/use-modal
```
### Simple usage
```tsx
import { useModal } from '@yet3/use-modal';
const MyModal = () => {
return (
...
)
}
const Component = () => {
const modal = useModal(MyModal)
return (
Open modal
{modal.component}
)
}
```
### Options
```ts
export interface BackdropOptions {
backdropColor: string;
closeOnBackdropClick?: boolean
onBackdropClick?: (d: {closeModal: ModalCloseFunc}) => void | null | false
backdropStyle?: CSSProperties
}
export interface CommonOptions {
closeAfter?: null | false | number;
portalElement?: PortalElement | null;
backdropColor?: string | null | false;
backdrop?: boolean | null | JSX.Element | ((children: ReactNode, opts: BackdropOptions) => JSX.Element);
closeOnBackdropClick?: boolean
onBackdropClick?: (d: {closeModal: ModalCloseFunc}) => void | null | false
backdropStyle?: CSSProperties
modalWrapper?: false | null | ((children: ReactNode, opts: ModalWrapperOptions) => JSX.Element) | JSX.Element;
}
// Options passed via UseModal.setOptions(Options)
export interface UseModalOptions extends CommonOptions {
startOpen?: boolean;
}
// Options passed to useModal(Options) hook
export interface UseModalHookOptions
extends CommonOptions {
startOpen?: boolean;
props?: Partial
;
}
// Options passed to open/toggle functions
export interface ModalOptions
extends CommonOptions {
props?: P;
}
```
### useModal
useModal hook returns:
- isOpen: boolean - whether modal is open
- open: (options?: [ModalOptions](#options)) => void - function to open modal
- close: () => void - function to close modal
- toggle: (options?: [ModalOptions](#options)) => void - function to open/close modal
- component: ReactPortal | null - modal's portal
- options: [ModalOptions](#options) | null - when modal's open will return its options otherwise will return null
### UseModal
### Other type
- ModalCloseFunc: () => void
- ModalBaseProps:
- closeModal: [ModalCloseFunc](#other-type) - function passed to every modal that allows to close it
## Examples
### With props
```tsx
import { useModal, ModalBaseProps } from '@yet3/use-modal';
interface ModalProps extends ModalBaseProps {
text: string;
color?: string;
}
const MyModal = ({ closeModal, text, color = 'black' }: ModalProps) => {
return (
Super cool modal
{text}
Close
);
};
const Component = () => {
const modal = useModal(MyModal, { props: { color: 'red' } });
return (
modal.open({ props: { text: 'Super cool text' } })}>Open modal
{modal.component}
);
};
```
## With modalWrapper
```tsx
import { useModal, ModalBaseProps, UseModal } from '../../src';
UseModal.setOptions({
modalWrapper: (
),
});
const FirstModal = ({ closeModal }: ModalBaseProps) => {
return (
<>
First Modal
Close
>
);
};
const SecondModal = ({ closeModal }: ModalBaseProps) => {
return (
<>
Second Modal
Close
>
);
};
const Component = () => {
const modal1 = useModal(FirstModal);
const modal2 = useModal(SecondModal, {
backdropColor: 'rgba(255, 100, 100, 0.7)',
});
return (
modal1.toggle()}>Toggle modal 1
modal2.toggle()}>Toggle modal 2
{modal1.component}
{modal2.component}
);
};
```