Package Exports

@lomray/react-modals
@lomray/react-modals/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lomray/react-modals) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React modals

reliability Security Rating Maintainability Rating Vulnerabilities Bugs Lines of Code size

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

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.

@lomray/react-modals