@lomray/react-modals
v2.0.1
Published
Context and hooks for using modal windows in React.
Downloads
61
Readme
Table of contents
Getting started
The package is distributed using npm, the node package manager.
npm i --save @lomray/react-modals
How to use
- Add modal component types
/**
* types/lomray/react-modals.d.ts
*/
import { IModalProps as IModalPropsDefault } from '@lomray/react-modals'
import { TDialogProps } from '@components/modals/default'
declare module '@lomray/react-modals' {
interface IModalProps extends IModalPropsDefault, TDialogProps {}
}
- Add ModalProvider and ModalRoot with Dialog (Modal) component
/**
* src/app.tsx
*/
import { ModalProvider } from '@lomray/react-modals';
import ModalRoot from '@lomray/react-modals';
import Layout from './components/layout';
import Dialog from './modals/default';
const App = () => (
<>
<Layout />
<ModalRoot Modal={(props) => <Dialog {...props} />} />
</>
)
- Create new modal layout with useModal hook
/**
* src/my-modal.tsx
*/
import type { IModalToggle } from '@lomray/react-modals';
import { createModalRef, useModal } from '@lomray/react-modals';
import React, { FC } from 'react';
export interface IMyModal extends IModalToggle {
text: string;
}
const MyModal: FC<IMyModal> = ({ closeModal, isVisible, text = 'default' }) => (
<div style={{ width: 300 }}>
<p>isVisible: {String(isVisible)}</p>
<p>text: {text}</p>
<button onClick={closeModal}>close</button>
</div>
);
export const myModalRef = createModalRef<IMyModal>();
const useMyModal = () =>
useModal(MyModal, {
className: 'additionalClassName',
hookRef: myModalRef,
});
export default useMyModal;
In cases where your modal window needs to access the parent store in Mobx, use the useModalMobx hook.
An example with Mobx can be found in Code examples
import { useModalMobx } from '@lomray/react-modals';
- Use new modal in component via hook
/**
* src/layout.tsx
*/
import { FC } from 'react';
import useMyModal, { myModalRef } from './my-modal';
const Layout: FC = () => {
const [open] = useMyModal(); // [open, hide]
return (
<div>
<button onClick={() => open({ text: 'open modal via hook' })}>
open modal via hook
</button>
<button onClick={() => myModalRef?.open({ text: 'open modal via ref' })}>
open modal via ref
</button>
</div>
);
};
export default Layout;
Demo
Explore demo app to more understand.
Bugs and feature requests
Bug or a feature request, please open a new issue.