npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@bolttech/atoms-notification

v0.13.0

Published

## Summary

Downloads

828

Readme

Notification

Summary

The Notification component is used to display notifications, either System level with toast like notifications with timer, or displaying notifications as block components. This component has some basic interactions between props that should be known, they are:

  • Duration: Allowed values are integers between 3 and 10, those values are in seconds. You can also use 0 as a value, and when it's provided, the notification will not disapear until the user clicks on the close icon.

  • onClose: If you use the component as a Block component, you should pass a onClose prop and deal with the visibility conditions on your side using the NotificationProps type. If you use it as a Toast, you should not pass the onClose prop and use the type NotifyProps.

Requirements

  • Node 16

Installation

Install the Notification package on your project, with the following command:

npm i @bolttech/atoms-notification@version

How to use

There are 2 ways of using the Notification component. One is displaying it as a toast on the middle top of your application and as a block component.

1. useNotification hook (Toast)

To display a notification as a Toast you should use the useNotification hook. You should configure it as shown bellow:

// app.tsx or any other file you declare your providers

import { NotificationProvider } from '@bolttech/atoms-notification';

export function App(props) {
  return (
    <BolttechThemeProvider theme={bolttechTheme}>
      <NotificationProvider translateY={'80px'}>{props.children}</NotificationProvider>
    </BolttechThemeProvider>
  );
}
// any file that should send a notification

import { useNotification, NotifyProps } from '@bolttech/atoms-notification';

const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth }: NotifyProps) => {
  const { notify } = useNotification();

  return (
    <Button
      size="sm"
      variant="brand"
      title="Click here to notify!"
      onClick={() =>
        notify({
          id: `${id}-${Math.random() * 1234}`,
          dataTestId: dataTestId,
          variant: variant,
          duration: duration,
          icon: icon,
          text: text,
          fullWidth: fullWidth,
        })
      }
    />
  );
};

You can pass a prop called translateY that is a string to the provider, as it is a fixed component, so it will display on top of your application. If you wish to translate it to be below your Header for an example, you can pass the height of your header to that prop and it will appear bellow it.

IMPORTANT: Please be sure that you are using a different Id for each notification, as it's the property that is used to identify which notification should be removed from the list when timer run out.

2. Component (Block)

If you want to display just the Notification as a block component to benefit of it's design, but without any other feature, you can use it the same way as using a normal component.

import { Notification, NotificationProps } from '@bolttech/atoms-notification';

const Example = ({ id, dataTestId, variant, duration, icon, text, fullWidth, onClose }: NotificationProps) => {
  return <Notification id={id} dataTestId={dataTestId} variant={variant} duration={duration} icon={icon} text={text} fullWidth={fullWidth} onClose={onClose} />;
};