npm package: @highlight-ui/inline-notification
Description: An inline notification component for contextual confirmations
Author: Personio GmbH & Co. KG
Latest version: 3.1.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/inline-notification)](https://www.npmjs.com/package/@highlight-ui/inline-notification)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/v/0/p/94611a-inline-notification/b/795cb2)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/feedback-inlinenotification--default)

# @highlight-ui/inline-notification

Using npm:

```bash
npm install @highlight-ui/inline-notification
```

Using yarn:

```bash
yarn add @highlight-ui/inline-notification
```

Using pnpm:

```bash
pnpm install @highlight-ui/inline-notification
```

In your (S)CSS file:

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

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

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

## Usage

```tsx
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](https://www.personio.design/40d648a47/v/0/p/94611a-inline-notification/b/795cb2) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).