nuǝW pǝuoᴉʇᴉsoԀ ʎlǝʌᴉʇɐƃǝN

    @zendeskgarden/react-notifications
    TypeScript icon, indicating that this package has built-in type declarations

    8.54.1 • Public • Published

    @zendeskgarden/react-notifications npm version

    This package includes several varieties of notifications and wells within the Garden Design System.

    Installation

    npm install @zendeskgarden/react-notifications
    
    # Peer Dependencies - Also Required
    npm install react react-dom styled-components @zendeskgarden/react-theming

    Usage

    import { ThemeProvider } from '@zendeskgarden/react-theming';
    import { Notification, Title } from '@zendeskgarden/react-notifications';
    
    /**
     * Place a `ThemeProvider` at the root of your React application
     */
    <ThemeProvider>
      <Notification>
        <Title>Example Title</Title>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit...
      </Notification>
    </ThemeProvider>;

    Toasts

    import { ThemeProvider } from '@zendeskgarden/react-theming';
    import { Button } from '@zendeskgarden/react-buttons';
    import { Notification, Close, ToastProvider, useToast } from '@zendeskgarden/react-notifications';
    
    const ToastExample = () => {
      const { addToast } = useToast();
    
      return (
        <Button
          onClick={() =>
            addToast(({ close }) => (
              <Notification>
                Example notification
                <Close onClick={close} aria-label="Close" />
              </Notification>
            ))
          }
        >
          Add toast
        </Button>
      );
    };
    
    <ThemeProvider>
      <ToastProvider>
        <ToastExample />
      </ToastProvider>
    </ThemeProvider>;

    Install

    npm i @zendeskgarden/react-notifications

    DownloadsWeekly Downloads

    7,402

    Version

    8.54.1

    License

    Apache-2.0

    Unpacked Size

    96.8 kB

    Total Files

    31

    Last publish

    Collaborators

    • zendesk-garden