Store dismissible key/value entries in localStorage, which can be used for things like onboarding, notifications and more.
Store dismissible key/value entries in localStorage, which can be used for things like onboarding, notifications and more.
``bash`
yarn install @artsy/dismissible
Once the package is installed, add the DismissibleProvider context to your app, pass in localStorage keys to be dismissed later, and (optionally) add a userID to attach the key identifiers to:
`jsx
const Root = () => {
return (
userID="some-user-id"
>
)
}
`
Then from , can manage dismissible keys like so:
`jsx
const NewFeatureAlert = () => {
const { dismiss, isDismissed } = useDismissibleContext()
const isDisplayable = !isDismissed("newFeature").status
const handleClose = () => {
dismiss("newFeature")
}
if (!isDisplayable) {
return <>{children}
}
return (
{children}
)
}
`
The useDismissibleContext hook returns a few useful things for managing dismissibles:
`jsx
const App = () => {
const { dismiss, dismissed, isDismissed, keys, addKey syncFromLoggedOutUser } =
useDismissibleContext()
// Dismisses a key
dismiss("id")
// All dismissed keys
dismissed()
// Status of the thing dismissed, including timestamp
isDismissied("id")
// Add a new key at runtime
addKey("otherID")
// If a logged-out user logs in, resync so that dismissed keys don't reappear
syncFromLoggedOutUser()
// All dismissible keys
console.log(keys)
}
`
`bash`
yarn test
yarn type-check
yarn lint
yarn compile
yarn watch
This project uses auto-release
to automatically release on every PR. Every PR should have a label that matches
one of the following
- Version: Trivial
- Version: Patch
- Version: Minor
- Version: Major
Major, minor, and patch will cause a new release to be generated. Use major for
breaking changes, minor for new non-breaking features, and patch for bug fixes.
Trivial will not cause a release and should be used when updating documentation
or non-project code.
If you don't want to release on a particular PR but the changes aren't trivial
then use the Skip Release` tag along side the appropriate version tag.