@reltio/console NPM

@reltio/console

A collection of reusable UI components and utility functions for the Reltio Console, designed to standardize UI across Reltio applications.

Installation

To install the package, run:

npm install @reltio/console

Make sure to install peer dependencies like react, @mui/material, and others if they're not already in your project:

npm install react react-dom @mui/material clsx lodash

Usage

You can import individual components or utility functions from the package:

import { ApplicationHeader } from '@reltio/console';

const MyApp = () => (
  <ApplicationHeader notificationsUrl="/notifications" />
);

Components

ApplicationHeader

A flexible header component with integrated notification and user management buttons, as well as an apps drawer.

Props

children (ReactNode, optional): Additional content to be rendered within the header.
className (string, optional): Custom CSS class for the root element.
style (CSSProperties, optional): Custom CSS styles for the root element.
notificationsUrl (string, optional): URL for the notification button. If not defined, the notification button is hidden. Default is "/notifications?env={query.env}&tenant={query.tenant}".

Features

Includes a menu button that toggles an apps drawer.
Displays the Reltio logo with a link to the home page.
Shows a "Console" icon and title.
Renders optional child components.
Includes a notification bell (if URL is provided).
Displays an apps button and a user button.

Usage Example

import { ApplicationHeader } from '@reltio/console';

const MyApp = () => (
  <ApplicationHeader notificationsUrl="/custom-notifications" className="my-custom-header">
    <div>Additional header content</div>
  </ApplicationHeader>
);