JSPM – hyperdom-modal@0.1.0

Package Exports

hyperdom-modal

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

Readme

Accessible modal component built with Hyperdom

Uses <dialog> element by default and loads a polyfill for older browsers
No need to worry about z-index since modal opens on its own layer
By default modal expands its dimensions to fit your content - adds styles to limit dimensions
Modal HTML is returned straight away to your app (rather than returning on show) and hidden with CSS. The open attribute is added to the <dialog> to reveal it

View Demo

Installation

$ yarn add hyperdom-modal

Usage

JS

const hyperdom = require('hyperdom')
const h = hyperdom.html
const HyperdomModal = require('hyperdom-modal')

class YourApp {
  constructor() {
    this.modalActive = false
  }

  activateModal() {
    this.modalActive = true
  }

  deactivateModal() {
    this.modalActive = false
  }

  render() {
    return h(
      'div',
      h(
        'button',
        {
          type: 'button',
          onclick: () => this.activateModal()
        },
        'Open Modal'
      ),
      new HyperdomModal(
        {
          showModal: this.modalActive
        },
        h(
          'div',
          h('h2', 'Modal Heading'),
          h('p', 'This is modal content.'),
          h(
            'button',
            {
              type: 'button',
              onclick: () => this.deactivateModal()
            },
            'Close'
          )
        )
      )
    )
  }
}

hyperdom.append(document.getElementById('root'), new YourApp())

CSS

Supported browsers provide their own default styles for the modal and backdrop. You must include the polyfill stylesheet in your app for unsupported browsers to achieve the same default behaviour. You can include it from this package at node_modules/hyperdom-modal/dist/dialog-polyfill.css

You can add styles to override the defaults and style the content passed in to your modal. Example stylesheet.

Options

Name	Type	Default	Description
`showModal`	`Boolean`	`false`	Trigger the modal displaying on the page
`rootClass`	`String`	`'modal'`	Override the default class on the root modal element

More About `<dialog>`

License

We're Hiring!

Join our remote team and help us build amazing software. Check out our career opportunities.

hyperdom-modal