feat: support DOM as message (#22)

2nthony · Aug 1, 2020 · b289d97 · b289d97
1 parent 2654b4d
commit b289d97
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/example/public/README.md b/example/public/README.md
@@ -60,7 +60,7 @@ createToast('The Evil Rabbit jumped over the fence.', {
 
 <button @click="showDefault">Show toast</button>
 
-## Multiline
+### Multiline
 
 ```js
 import { createToast } from 'vercel-toast'
@@ -75,6 +75,19 @@ createToast(
 
 <button @click="multiline">Show toast</button>
 
+### Use a DOM node as message
+
+```js
+const message = document.createElement('div')
+message.innerHTML = `<i style="color:magenta;">The Evil Rabbit jumped over the fence.</i>`
+
+createToast(message, {
+  timeout: 3000
+})
+```
+
+<button @click="domNode">Show toast</button>
+
 ### Action
 
 ```js
@@ -155,6 +168,14 @@ createToast('The Evil Rabbit jumped over the fence.', {
       })
     },
 
+    domNode() {
+      const message = document.createElement('div')
+      message.innerHTML = '<i style="color:magenta;">The Evil Rabbit jumped over the fence.</i>'
+      createToast(message, {
+        timeout: 3000
+      })
+    },
+
     action() {
       createToast('The Evil Rabbit jumped over the fence.', {
         action: {

diff --git a/src/index.ts b/src/index.ts
@@ -10,6 +10,8 @@ export interface Action {
   callback?: ActionCallback
 }
 
+export type Message = string | HTMLElement
+
 export type ActionCallback = (toast: Toast) => void
 
 export interface ToastOptions {
@@ -28,13 +30,13 @@ export interface ToastOptions {
 }
 
 export class Toast {
-  message: string
+  message: Message
   options: ToastOptions
   el?: HTMLDivElement
 
   private timeoutId?: number
 
-  constructor(message: string, options: ToastOptions = {}) {
+  constructor(message: Message, options: ToastOptions = {}) {
     const { timeout = 0, action, type = 'default', cancel } = options
 
     this.message = message
@@ -63,10 +65,16 @@ export class Toast {
     const inner = document.createElement('div')
     inner.className = 'toast-inner'
 
-    const text = document.createElement('span')
+    const text = document.createElement('div')
     text.className = 'toast-text'
     inner.classList.add(type as string)
-    text.textContent = this.message
+
+    if (typeof this.message === 'string') {
+      text.textContent = this.message
+    } else {
+      text.appendChild(this.message)
+    }
+
     inner.appendChild(text)
 
     if (cancel) {
@@ -152,7 +160,7 @@ export class Toast {
   }
 }
 
-export function createToast(message: string, options?: ToastOptions): Toast {
+export function createToast(message: Message, options?: ToastOptions): Toast {
   return new Toast(message, options)
 }