Creating Toaster Web Component

Last updated on April 4, 2020

In this week’s building with Javascript blog post, we’ll be going to learn and building about Creating Toaster Web Component.

Introduction

As you all know that in recent weeks we’re learning how we can build Web components with Vanilla Javascript.

In continuation of that, this time I built Toaster Web Component after inspired by the toaster javascript library.

Creating Toaster Web Component

I keep building the web components with Vanilla Javascript but minimal requirements.

Then, I took this opportunity from the toaster javascript library and I listened down the below things to keep in my component.

• Toaster Element Type
• Toaster element message
• Toaster element position

Ultimately, the toaster element’s purpose is to show the message to the end-user.

The toaster component would look like,

Toaster Element Message

In order to receive the toaster message input, we have used Named Slot as message from the toaster component side.

<div class="container">
  <slot name="message"></slot>
</div>

Toaster Element Type

The toaster element type is for differentiating the message to the user. Here, we have 3 different message types like error info warning.

You can get this type of input with the element attribute as type='warning'.

To style the element based on the typevalue and we can use the:hostselector

Each message type would be differentiated with CSS styling with CSS variables,

:host {
    --warning-bg-color: #FF851B;
    --warning-text-color: #FFF;
    --error-bg-color: #FF4136;
    --error-text-color: #FFF;
    --info-bg-color: #DDD;
    --info-text-color: #333;
}

We have defined these variables inside :hostselector so this won’t be leaked to outside DOM structure where it’s being used.

:host([type="warning"]) .container {
  background-color: var(--warning-bg-color);
  color: var(--warning-text-color);
}

:host([type="error"]) .container {
  background-color: var(--error-bg-color);
  color: var(--error-text-color);
}

:host([type="info"]) .container {
  background-color: var(--info-bg-color);
  color: var(--info-text-color);
}

Toaster Element Position

Usually, we show the message to the user with less distracting but eye-catching.

Here, we stick the element to bottom right position.

.container {
    position: absolute;
    bottom: 10px;
    right: 10px;
}

Closing Toaster

Last but not least, at a certain point in time the user should be able to close the message once seen else auto timeout.

To achieve this, we use visible property as observedAttributes. Whenever we do any change from DOM our respective web component would be notified.

static get observedAttributes() {
  return ['visible'];
}

If our element holds visibleattribute then toastercomponent will be visible but by default hidden.

:host([visible]) {
  display: block;
}

Conclusion

The ultimate purpose of building any component would be to put it in use,

<vj-toaster id="toasterId1" type="warning">
    <div slot="message">
       You got 2 warning messages !!!
    </div>
</vj-toaster>

<script>
  document.getElementById('toasterId1').visible = 
  !document.getElementById('toasterId1').visible;
</script>

Finally, we have built our toasterweb component in Vanilla JavaScript way. You can always post your queries in the comments section.