lit-toaster
v0.2.5
Published
Notifications for Lit Web Components
Maintainers
brysonwReadme
Installation
npm install lit-toasterUsage
1. After installation, add toaster element to template
<body>
<my-element></my-element>
<app-toaster></app-toaster>
</body>Recommend placing
<app-toaster></app-toaster>below all other elements.
2. Import toast (emitter) within your Lit Web Component(s) and call toast.show()
// my-element.ts
import { LitElement, css, html, type TemplateResult } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { toast } from 'lit-toaster';
@customElement('my-element')
export class MyElement extends LitElement {
@property()
name?: string = 'my-element';
render(): TemplateResult {
return html`<div>
<p>${this.name} lit toast.</p>
<button
type="button"
@click=${(): void =>
toast.show("Here's your toast - peace and much love.")}
>
Create toast
</button>
</div>`;
}
static styles = css`
:host {
color: #1e90ff;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
'my-element': MyElement;
}
}Toaster element properties
| Name | Attribute |
| ------------- | --------- |
| toastsLimit | false |
Documentation
For more detailed documentation, please view the API Reference.
Contributing
If you have suggestions for how this project could be improved, or want to report a bug, feel free to open an issue! We welcome all contributions.
Likewise, before contributing please read the contribution guide.
Credits
Lit Toaster is heavily inspired by react-hot-toast.
Motivation
I implemented (toast) notifications in a few small side projects using different frontend frameworks. Instead of copying and modifying the same code for Lit, I decided to publish it as a public package.