JSPM – react-dismissible@1.3.0

Package Exports

react-dismissible

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

Readme

Make your components dismissible!

Usage

Example 1: The `useDismissible` hook

import { useDismissible } from 'react-dismissible'

import { SomeModal } from './some-modal' // not real

function ComfirmButton(props) {
  let [isVisible, setModalVisibiility] = React.useState(false)

  const dismissible = useDismissible({
    onDismiss: () => setModalVisibility(false)
    click: true,  // call onDismiss if clicking outside of this modal
    escape: true, // call onDismiss if the user presses escape
  })

  return (
    <>
      <button {...props} onClick={() => setModalVisiblity(true)} />
      {isVisible && (
        <SomeModal ref={dismissible}>
          <button onClick={() => setModalVisiblity(false)}>Cancel</button>
          <button onClick={props.onClick}>Do it!</button>
        </SomeModal>
      )}
    </>
  )
}

Example 2: The `Dismissible` component

import { Dismissible } from 'react-dismissible'

import { SomeModal } from './some-modal' // not real

function ComfirmButton(props) {
  let [isVisible, setModalVisibiility] = React.useState(false)

  return (
    <>
      <button {...props} onClick={() => setModalVisiblity(true)} />
      {isVisible && (
        <SomeModal>
          <Dismissible
            click // call onDismiss if clicking outside of this modal
            escape // call onDismiss if the user presses escape
            onDismiss={() => {
              setModalVisibility(false)
            }}
          >
            <button onClick={() => setModalVisiblity(false)}>Cancel</button>
            <button onClick={props.onClick}>Do it!</button>
          </Dismissible>
        </SomeModal>
      )}
    </>
  )
}

Dismissible Props

interface DismissibleProps {
  onDismiss: Function
  click?: boolean
  escape?: boolean
  disabled?: boolean
  document?: Document
  allowClickPropagation?: boolean
}

react-dismissible