@artsy/dismissible
Store dismissible key/value entries in localStorage, which can be used for things like onboarding, notifications and more.
Setup and Use
yarn install @artsy/dismissibleOnce 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:
const Root = () => {
return (
<DismissibleProvider
keys={["newFeature", "newFeature2"]}
userID="some-user-id"
>
<NewFeatureAlert>
<NewFeature />
</NewFeatureAlert>
<NewFeature2Alert>
<NewFeature2>
</NewFeature2Alert>
</DismissibleProvider>
)
}Then from <NewFeatureAlert />, can manage dismissible keys like so:
const NewFeatureAlert = () => {
const { dismiss, isDismissed } = useDismissibleContext()
const isDisplayable = !isDismissed("newFeature").status
const handleClose = () => {
dismiss("newFeature")
}
if (!isDisplayable) {
return <>{children}</>
}
return (
<Popover message="Check out this new feature!" onClick={handleClose}>
{children}
</Popover>
)
}API
The useDismissibleContext hook returns a few useful things for managing dismissibles:
const App = () => {
const { dismiss, dismissed, isDismissed, keys, syncFromLoggedOutUser } =
useDismissibleContext()
// Dismisses a key
dismiss("id")
// All dismissed keys
dismissed()
// Status of the thing dismissed, including timestamp
isDismissied("id")
// If a logged-out user logs in, resync so that dismissed keys don't reappear
syncFromLoggedOutUser()
// All dismissible keys
console.log(keys)
}Development
yarn test
yarn type-check
yarn lint
yarn compile
yarn watchThis 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.