@highlight-ui/inline-notification

Using npm:

npm install @highlight-ui/inline-notification

Using yarn:

yarn add @highlight-ui/inline-notification

Using pnpm:

pnpm install @highlight-ui/inline-notification

In your (S)CSS file:

@import url('@highlight-ui/inline-notification');

Once the package is installed, you can import the library:

import { InlineNotification } from '@highlight-ui/inline-notification';

Usage

import React from 'react';
import { InlineNotification } from '@highlight-ui/inline-notification';

export default function InlineNotificationExample() {
  return (
    <InlineNotification notificationMessage="Message" placement="right">
      <b>Click me</b>
    </InlineNotification>
  );
}

Props 📜

| Prop | Type | Required | Default | Description | | :-------------------- | :--------------------------------- | :------- | :------ | :-------------------------------------------------------------------- | | children | React.ReactElement | Yes | | Specify the element that triggers the notification pop-up | | notificationMessage | React.ReactNode | Yes | | Specify the notification message | | autoHideTimeout | number | No | 3000 | Allows the specifying the timeout (in ms) for hiding the notification | | placement | 'top', 'left', 'bottom', 'right' | No | top | Allows for setting the notification placement | | className | string | No | | Allows providing a custom class to the notification | | triggerClassname | string | No | | Allows providing a class to the DIV that triggers the notification | | onHide | () => void | No | | Allows for calling a function after the notification hides |

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.