@highlight-ui/inline-notification NPM | npm.io

3.1.4 • Published 3 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 months ago

@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.

@highlight-ui/utils-commons @highlight-ui/utils-hooks @highlight-ui/utils-portal-manager

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig @highlight-ui/empty-state

3 months ago

5 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

7 months ago

7 months ago

10 months ago

7 months ago

7 months ago

9 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago