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)