JSPM

react-modal-global

0.9.31
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 286
  • Score
    100M100P100Q90894F
  • License MIT

React Modal but Global

Package Exports

  • react-modal-global
  • react-modal-global/dist/index.ts

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 (react-modal-global) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Modal Global

Needs feedback, please contribute in GitHub Issues or leave your message on my discord server.

Introduction

This is a package that provides modal dialogs which does similar to react-modal except that it is accessed from anywhere.

Features

  • Globalization - opened from anywhere (even from non-component context)

  • Multicontainers - for e.g. templates

  • Context - the data passed when openning can be accessed in the component via useModalContext hook

  • Stacking/Nesting

  • Forking

  • Data preservation

  • open method returns Promise

  • The package uses only react as a dependency.

The main idea

There is a ModalContainer which is a container for modal components (it usually appears in #root element) and modal components will appear there as you open them.

Show `ModalContainer` usage example 
import React from "react"
import ReactDOM from "react-dom"
import { ModalContainer } from "react-modal-global"

function App() {
  return (
    <>
      {/* ... Other components ... */}
      <ModalContainer />
    </>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))
There are other features upon this idea.

Usage

Usage may seem a bit complicated, please, be patient and read all the thing throughout.

Create new Modal component

All it needs for creating such is a valid JSX.Element:

Plain component

// Arrow function
const ModalComponent = () => <>:3</>
// Plain function
function ModalComponent() {
  return <>:3</>
}

Using modal context

function ModalComponent() {
  const modal = useModalContext() // Getting modal context of current component

  return (
    <>
      <h2>Title</h2>
      <p>Content text</p>
      
      <button type="button" onClick={() => modal.close()}>My custom button to close modal</button>
    </>
  )
}

Note that PopupLogin should have its own styles to look like a popup, it is advised to use custom PopupLayout (Learn below).

import "react-modal-global/styles/modal.scss" // import default styles if should

import { Modal } from "react-modal-global"

import PopupLogin from "./PopupLogin"

function HomeView() {
  function showLoginPopup() {
    // Recommended naming is [Popup, Dialog or Modal] then [Name of a modal] i.e. DialogMyName
    Modal.open(PopupLogin, { /* Probably your options? */ })
  }
  return (
    <>
      <h2>Title</h2>
      <p>Content text</p>

      <button type="button" onClick={showLoginPopup}>Show login popup</button>
    </>
  )
}

You can use options when opening a modal. Available options

Option Description
id Specifies id of a modal (default: Date.now()). In react it's used as a key. May be used to find and close specific modal or else.
closable Specifies if a modal closing is controlled itself
weak By default, a last closed modal will not be removed and if same modal will be request to open, it will restore previous modal but with weak: true it will not happen.
fork Creates a new layer for a single modal

There is a multicontainers feature - you can put containers at different depths of your app to vary templates.

Only one container will be used.

The last mounted container will be used.

To use various modal types (Dialog, Popup, Drawer), you create your own layout for each one, advised naming is [Type][Name] => DrawerLayout.

See example here

To create your first Popup modal try this

import { FormEvent } from "react"
import { useModalContext } from "react-modal-global"

import PopupLayout from "modal-layouts/PopupLayout/PopupLayout"

function PopupMyFirst() {
  const modal = useModalContext()

  function onSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()

    const target = event.currentTarget
    const ageInput = target.elements.namedItem("age")

    alert(ageInput) // Show age
    modal.close() // Then close `this modal`
  }
  return (
    <PopupLayout>
      <form onSubmit={onSubmit}>
        <h2>My first popup modal</h2>
        <input name="age" placeholder="Enter your `first popup modal` age" />
        <button type="submit">See my age</button>
      </form>
    </PopupLayout>
  )
}

export default PopupMyFirst

If using several containers

Instead of wrapping your modal components manually you can pass template attribute to ModalContainer, for example, PopupLayout

<ModalContainer template={PopupLayout} />