NoticeIt

Installation

npm install noticeit

Usage

ES Module (Recommended)

// Using minified version
import { noticeIt } from 'noticeit';
import 'noticeit/dist/noticeit.min.css';

// Or using non-minified version
import { noticeIt } from 'noticeit/dist/noticeit.esm.js';
import 'noticeit/dist/noticeit.css';

// Show a success toast
noticeIt.send('Successfully saved!', 'success');

// Show an error toast
noticeIt.send('An error occurred', 'error');

// Show a warning toast
noticeIt.send('Please check your input', 'warning');

// Show an info toast
noticeIt.send('New message received', 'info');

Browser

<!-- Using minified version -->
<link rel="stylesheet" href="node_modules/noticeit/dist/noticeit.min.css">
<script type="module">
  import { noticeIt } from './node_modules/noticeit/dist/noticeit.min.js';
  // Your code here
</script>

<!-- Or using non-minified version -->
<link rel="stylesheet" href="node_modules/noticeit/dist/noticeit.css">
<script type="module">
  import { noticeIt } from './node_modules/noticeit/dist/noticeit.esm.js';
  // Your code here
</script>

Options

You can customize the toast by passing options:

noticeIt.send('Custom toast', {
  type: 'success',    // 'success' | 'error' | 'warning' | 'info' | 'default'
  duration: 3000,     // Duration in milliseconds
  position: 'top',    // 'top' | 'bottom'
  onClick: (toast) => {
    // Click callback
    console.log('Toast clicked!');
  }
});

Available Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | type | string | 'default' | Toast type ('success', 'error', 'warning', 'info', 'default') | | duration | number | 3000 | Duration in milliseconds before auto-dismiss | | position | string | 'top' | Position of the toast ('top', 'bottom') | | onClick | function | null | Callback function when toast is clicked |

Browser Support

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Opera (latest)

Note: The blur effect requires a modern browser that supports backdrop-filter.