원문 캡처 · github.com
원문 캡처 · github.com

Lit 컴포넌트에 알림을 띄우려면 lit-toaster를 설치하고 <app-toaster> 요소와 toast.show()를 함께 사용한다. 앱 안에서 토스트 알림을 구현하려는 개발자는 별도 패키지로 이 기능을 추가할 수 있다.

lit-toaster는 Lit 웹 컴포넌트에서 알림을 표시하는 패키지다. 알림을 전담하는 요소를 두고 호출하는 방식으로, 알림 기능을 공용 도구 상자에서 꺼내 쓰는 것에 빗댈 수 있다.

어떻게 설치하고 사용하나

npm, Yarn, pnpm 중 사용하는 패키지 관리자로 설치한다.

sh
npm install lit-toaster
# or
yarn add lit-toaster
# or
pnpm add lit-toaster

설치 뒤 템플릿에 <app-toaster>를 추가한다. 프로젝트 안내는 이 요소를 다른 요소 아래에 두는 것을 권장한다.

html
<body>
 <my-element></my-element>
 <app-toaster></app-toaster>
</body>

Lit 컴포넌트에서 toast를 가져온 뒤 toast.show()를 호출해 알림을 표시한다. 아래 예시에서는 버튼을 누르면 알림이 뜬다.

typescript
// 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;
 }
}

어떤 설정과 문서를 확인해야 하나

문서에 나온 토스터 요소 속성은 toastsLimit이며, 표의 Attribute 항목은 false다. 자세한 설정은 API 참조 문서에서 확인할 수 있다. 프로젝트는 웹사이트와 npm 패키지에서 안내한다.

이 패키지는 react-hot-toast에서 영감을 받았다. 제작자는 여러 프런트엔드 프레임워크를 이용한 소규모 프로젝트에서 알림 코드를 반복해 복사·수정하는 대신, Lit용 패키지로 공개했다고 설명한다. 기여 안내와 변경 기록은 기여 가이드, 변경 기록에서 볼 수 있다. 라이선스는 MIT다.

도입 전에는 사용하는 패키지 관리자가 지원되는지, <app-toaster> 배치와 toastsLimit 설정이 프로젝트 요구에 맞는지 API 문서를 확인하면 된다. 원문은 가격이나 지원 범위를 밝히지 않는다.