npm package: @gebnar/solid-bubble-alerts
Description: An easy-to-use, lightweight, and flexible notification/alert manager for the SolidJS ecosystem.
Latest version: 1.1.0

## Install

`npm install solid-bubble-alerts`

## import

Import this wherever you need to show alerts:
`import { showBubbleAlert } from 'solid-bubble-alerts'`

Optionally import these for specific use-cases:

- `dismissBubbleAlerts`: trigger the fade-out animation for some or all alerts
- `clearBubbleAlerts`: instantly clear some or all alerts
- `BubbleAlertPortal`: optionally render this component to control where alerts are rendered in the dom

## basic usage

To show an alert, all you need is a single function call: `showBubbleAlert(props)`

All props are optional (though I recommend you set the `content` for obvious reasons...):
- `content` (string): The alert content.
- `duration` (number): Number of ms before the alert fades. Default 2000. Set to a negative value to make the alert "Sticky".
- `fadeTime` (number): Number of ms for alert fade transition. Default 500.
- `style` (JSX.CSSProperties): Style overrides for the alert.
- `countStyle` (JSX.CSSProperties): Style overrides for the duplicate alert counter.
- `id` (number): Unique ID for this alert. You probably don't need to set this.
- `show` (function): Callback to execute immediately when the alert is shown.
- `dismiss` (function): Callback to execute when the alert begins fading. This is not fired when a duplicate alert occurs.
- `clenaup` (function): Callback to execute when the alert is removed from the dom. This is also fired when a duplicate alert occurs.

## advanced usage
If you want to control where the alerts render to the dom:
- render the `<BubbleAlertPortal />` component
- or add an element with the id `SBA-alert-portal`
If this element exists, it will be used. If it doesn't exist, it will be appended to the document when an alert is shown.

Use these for external control over alerts
- `dismissBubbleAlerts(ids?[])`: Trigger the fade-out animation for specified alerts. Passing an empty list does nothing (for safety reasons). Excluding the parameter entirely triggers dismissal for all alerts. Triggers dismiss callbacks.
- `clearBubbleAlerts(ids?[])`: Same as `dismissBubbleAlerts`, except this instantly removes them from the dom. Skips dismiss callbacks. Triggers cleanup callbacks.

For the purposes of the above functions, alert `id` is returned from `showBubbleAlert()`

## IDs

Alerts have an `id` field to allow manipulation of specific alerts, and to enable combining multiple duplicate alerts into a single element with a counter. By default, alerts are granted an id based on a hash of their prroperties. This is not a very robust hash, but that shouldn't matter.

For the most part, you shouldn't need to sepcify ids aside from a few specific considerations:
- You want to force or prevent the combining behavior, you can control the id yourself. (E.g. setting up a truly unique id generator would prevent ever combining alerts.)
- For some reason you're passing in props objects that are so huge, hashing them is impacting performance. In this case, sepcify your own ids and the hash won't happen.
- You plan to use the id for some other reason...

## Roadmap

NO ETA...

- Implement swipe-to-dismiss
- Accessibility improvements
- More animations (entry/reposition)