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
    }

    Keywords

    Install

    npm i react-dismissible

    DownloadsWeekly Downloads

    1,588

    Version

    1.3.0

    License

    Apache-2.0

    Unpacked Size

    22.8 kB

    Total Files

    8

    Last publish

    Collaborators

    • kldavis4
    • spbyrne
    • jamespohalloran
    • scottgallant
    • tinacmsbot
    • forestry_chris
    • jeffsee55
    • jpatters
    • ncphillips
    • dwalkr