C4 Notifications

A flexible and customizable notification library for React applications.

Storybook

Explore the components and their extensive features in our Storybook deployment — discover all the notification types, customization options, and interactive examples!

Installation

To install the library, use npm:

npm install @camunda/c4-notifications

Usage

To display notifications, first you need to add the Notifications component to your application's root.

import { Notifications } from '@camunda/c4-notifications';

function App() {
  return (
    <div>
      {/* Other components */}
      <Notifications />
    </div>
  );
}

Then, you can trigger notifications from anywhere in your application using the notify object.

Basic Notifications

import { notify } from '@camunda/c4-notifications';

// Success notification
notify.success({
  title: 'Success',
  subtitle: 'The operation was successful.',
});

// Error notification
notify.error({
  title: 'Error',
  subtitle: 'Something went wrong.',
});

Actionable Notifications

You can also create notifications with actions by providing an action object in the options.

import { notify } from '@camunda/c4-notifications';

notify.info({
  title: 'Update Available',
  subtitle: 'A new version of the application is available.',
  options: {
    action: {
      label: 'Update',
      onClick: () => {
        console.log('Updating...');
      },
    },
  },
});

Styling

This library relies on the Carbon Design System for its styling. To ensure that the components are rendered correctly, you must have the Carbon theme and other necessary styles imported into your application.

For example, you can import the styles in your main SCSS file:

@use '@carbon/react';

Or in your main JavaScript/TypeScript file:

import '@carbon/react/scss/index.scss';

Please refer to the Carbon Design System documentation for more information on how to set up the styles in your project. You can also see an example of how to set up the styles in the index.scss file in this repository.

Custom positioning

You can customize the top offset of the notifications by providing a topOffset property in the Notifications component, or the z-index by providing a zIndex property.

import { Notifications } from '@camunda/c4-notifications';

function App() {
  return (
    <div>
      {/* Other components */}
      <Notifications topOffset={100} zIndex={1000} />
    </div>
  );
}

Development

To get started with development, follow these steps:

# Install dependencies
npm install

# Start the Storybook server
npm run storybook

# Run unit tests
npm run test:unit

# Build the library
npm run build

Contributing

Contributions are welcome! Please refer to the project's contribution guidelines for more information.