Notifications for Lit Web Components
See the code
npm install lit-toaster
# or
yarn add lit-toaster
# or
pnpm add lit-toaster
<body>
<my-element></my-element>
<app-toaster></app-toaster>
</body>
Recommend placing
<app-toaster></app-toaster>below all other elements.
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;
}
}
| Name | Attribute |
|---|---|
toastsLimit | false |
For more detailed documentation, please view the API Reference.
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.
Lit Toaster is heavily inspired by react-hot-toast.
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.
Notifications for Lit Web Components
See the code
npm install lit-toaster
# or
yarn add lit-toaster
# or
pnpm add lit-toaster
<body>
<my-element></my-element>
<app-toaster></app-toaster>
</body>
Recommend placing
<app-toaster></app-toaster>below all other elements.
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;
}
}
| Name | Attribute |
|---|---|
toastsLimit | false |
For more detailed documentation, please view the API Reference.
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.
Lit Toaster is heavily inspired by react-hot-toast.
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.