@ws-serenity/react-modals
v3.0.0
Published
React modal dialogs
Downloads
23
Readme
Простейшие компоненты модального окна
Суть в отсутствии каких-либо "лишних стилей", что позволяет без проблем настраивать модальное окно под любой проект
Components
ModalBase
Базовое модальное окно. Его можно закрыть только нажатием вне его области
export type ModalBaseProps = {
// вложенные элементы
children: ReactNode;
// слой с модалкой
layoutClassName?: string;
// контейнер модалки
containerClassName?: string;
// закрывать ли модалку по клику вне её
closeOnBackClick?: boolean;
// функция закрытия модалки
onClose(): void;
}
Пример использования
<ModalBase
closeOnBackClick={true}
layoutClassName={'modal-base-layout'}
containerClassName={'modal-base-container'}
>
<p>Inside text</p>
</ModalBase>
ModalWindow
Шаблон с тайтлом, футером и иконкой закрытия модалки
export interface ModalWindowProps extends ModalBaseProps {
// заголовок
title: string | JSX.Element;
// иконка закрытия
closeIcon?: JSX.Element;
// футер
footer?: JSX.Element;
}
Пример использования
<ModalWindow
title={'Here I am'}
layoutClassName={'modal-window-layout'}
containerClassName={'modal-window-container'}
footer={<p>Footer</p>}
onClose={() => alert('close'))}
>
<p>Inside text</p>
</ModalWindow>
ModalDialog
Шаблон, в который можно передать несколько кнопок
export interface ModalDialogProps<TProps> extends ModalBaseProps {
// компонент кнопок
button: (props: TProps) => JSX.Element;
// пропсы для каждой кнопки
buttons: TProps[];
}
Пример использования
interface ButtonProps {
label: string;
className?: string;
onClick(): void;
}
const Button = (props: ButtonProps) => {
const { label, className, onClick } = props;
return (
<button
className={className}
onClick={onClick}
>
{label}
</button>
);
};
const SomeComponent = () => {
const buttons = [
{
label: 'Send',
onClick: () => alert('send'),
},
{
label: 'Cancel',
onClick: () => alert('cancel'),
},
];
return (
<ModalDialog
layoutClassName={'modal-dialog-layout'}
containerClassName={'modal-dialog-container'}
button={Button}
buttons={buttons}
onClose={() => alert('close')}
>
<p>Inside text</p>
</ModalDialog>
);
};
UseModalSpawner
Хук для работы с модальным окном. Предоставляет функции по открытию и закрытию модалки В месте расположения компонента ModalSpawner хук useModalSpawner спавнит определенную модалку, переданную в open
// типы функций хука useModalSpawner
type ModalControl<E> = {
open(props: E): void;
close(): void;
}
Пример использования
const AppWrapper = () => {
return (
<ModalSpawnerProvider>
<ModalSpawner/>
<InsideComponent/>
</ModalSpawnerProvider>
);
};
const InsideComponent = () => {
const { open, close } = useModal(Modal);
return (
<button
className={'show-modal-button'}
onClick={() => open({
title: 'Modal Spawner',
onClose: close,
})}
>
Show modal
</button>
);
};
function Modal({ title, onClose }: { title: string, onClose: () => void; }) {
return (
<ModalWindow
title={title}
onClose={onClose}
>
<p>Children</p>
</ModalWindow>
);
};