react-dismissible
TypeScript icon, indicating that this package has built-in type declarations

1.3.0 • Public • Published

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
}

Readme

Keywords

Package Sidebar

Install

npm i react-dismissible

Weekly Downloads

539

Version

1.3.0

License

Apache-2.0

Unpacked Size

22.8 kB

Total Files

8

Last publish

Collaborators

  • wicksipedia
  • warwick_tinacms
  • kldavis4
  • scottgallant
  • jeffsee55
  • jpatters
  • ncphillips
  • jamespohalloran
  • dwalkr