Nomadic People Migration

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

    1.0.0 • Public • Published

    react-persistent-dismissable

    React component to persistently dismiss (or undismiss) anything. It remembers by setting a value using IndexedDB on the user's browser for a given key.

    Status

    npm version Build Status

    Installation

    npm install --save react-persistent-dismissable

    Example

    The following example will render a notice with a close button. When the close button is clicked, the dismissed variable becomes true which will add the notice--dismissed class. The class would likely hide the notice.

    After clicking the close button, usePersistentDismissable will remember the notice was closed even between browser sessions.

    import * as React from 'react'
    import { usePersistentDismissable } from 'react-persistent-dismissable'
    import cn from 'classnames'
     
    const MyNotice = () => {
      const [dismissed, dismiss] = usePersistentDismissable('my-notice')
     
      return (
        <div className={cn('notice', dismissed && 'notice--dismissed')}>
          <p>Hey, read me! I am a notice.</p>
          <button onClick={dismiss}>Close me</button>
        </div>
      )
    }

    API

    usePersistentDismissable(keystring, initial?: boolean) => [boolean, dismiss: () => void, undismiss: () => void]

    The usePersistentDismissable hook accepts a unique key and an optional initial fallback value. The key should be unique within your whole app.

    The initial value is used while the hook reads the user's IndexedDB data. Once the database returns the persisted data, dismissed will update.

    Calling dismiss will change dimissed to true.

    Calling undismiss will change dimissed to false.

    Install

    npm i react-persistent-dismissable

    DownloadsWeekly Downloads

    22

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    12

    Last publish

    Collaborators

    • angeloashmore