React modals

Table of contents

• Getting started
• How to use
• Code examples
• Bugs and feature requests

Getting started

The package is distributed using npm, the node package manager.

npm i --save @lomray/react-modals

How to use

1. 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 {}
}

2. 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} />} />
  </>
)

3. 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';

4. 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.