@impactdk/react-modal

@impactdk/react-modal

A simple modal implementation for react. Also features a component for easily spawning react portals if you need to inject something else than a modal outside of the scope of the app.

Installation

npm install --save @impactdk/react-modal

Using the module

While it is possible to use the included Modal component out of the box, it's advised to make a custom modal component through the factory method (next section).

import React, { useRef } from 'react';
import { IModalRef, Modal } from '@impactdk/react-modal';

export const App = () => {
  const modalRef = useRef<IModalRef>();

  function openModal(): void {
    modalRef.current.open();
  }

  return (
    <div className="app">
      <button onClick={openModal}>Open modal</button>
      <Modal ref={modalRef}>
        This is the Modal content!
      </Modal>
    </div>
  );
};

Using the default styling

To use the default (scss) styling, import the file into another scss file. To alter the default styling, either work with the overridable scss variables, or override the styling done to the selectors completely.

override scss variables

// Default values for each variable are shown below.
$react-modal-z-index: 10000;
$react-modal-content-padding: 50px;
$react-modal-content-max-width: 600px;
$react-modal-class: modal;

@import "node_modules/react-modal/styles";

override selector styling

@import "node_modules/react-modal/styles";

.modal {
  // Override styling here...
}

Setup customised Modal component

It's possible to make a custom modal component through the included factory function, allowing you to set relevant default properties so you don't have to every time you use the component.

// custom-modal.ts
import { modalFactory, IModalProps } from '@impactdk/react-modal';

import { MyCustomCloseButton } from "./buttons/my-custom-close-button";

const defaultProps: IModalProps = {
  ...
};

export const CustomModal = modalFactory("custom-modal", MyCustomCloseButton, "backdrop-animation", defaultProps);

And then use it as you would with the included Modal component:

import React, { useRef } from 'react';
import { IModalRef } from '@impactdk/react-modal';

import { CustomModal } from "./custom-modal";

export const App = () => {
  const modalRef = useRef<IModalRef>();

  function openModal(): void {
    modalRef.current.open();
  }

  return (
    <div className="app">
      <button onClick={openModal}>Open modal</button>
      <CustomModal ref={modalRef}>
        This is the Modal content!
      </CustomModal>
    </div>
  );
};