wc-beru

Usage

Once installed, you need to go to your index.html and use the wc-beru tag.

<wc-beru></wc-beru>
<div id="app">
  <button id="btn">Push me</button>
</div>

Assuming that a wc-beru tag already exists in our index.html, we proceed to use the following code block:

import { toast } from 'wc-beru';

const button = document.getElementById('btn')

button.addEventListener('click', () => {
  toast.display('Hello world from WcBeru')
})

When importing toasts, it automatically detects if there is an instance of our wc-beru element.

In the example above, we call a display method, which allows us to render our toast; try it yourself:

It is worth noting that display is not the only available method; toast offers other semantic methods with different styles, which you will discover later on.

Optional parameters

The methods offered by toast, such as display, can accept optional parameters apart from the main message. Here is an example:

toast.display('Hi Jhon', {
    description: 'This is a message from wc-beru',
    closeButton: true,
    beruId: 'my-toast'
})

• description (string): Allows us to provide more context to the main message.
• closeButton (boolean): Renders a button to dismiss the toast.
• beruId (string): Renders the toast in a specific wc-beru instance; we will see an example of this later.

Positions

Our wc-beru element accepts a position attribute. This attribute allows us to indicate the position where we want our toast to be rendered, and there are only six possible values, which you will see below:

Theme

wc-beru also features a theme attribute that accepts two possible values: light (default value) and dark, allowing you to switch between light and dark modes when rendering the toast.

Types

As mentioned earlier, toast offers other methods; it provides five in total, including display. Here is a demonstration using the other available methods:

Rich colors

wc-beru accepts a fullcolor attribute, which forces the toast to use colors based on its type, thereby enhancing its visual purpose.

<wc-beru fullcolor></wc-beru>

Multiple instances of wc-beru

As we learned previously, toast methods accept an object as a second parameter that allows us to add more context, render a close button, and the one we will look at right now: the beruId. This makes it easy to choose which wc-beru instance we want to render our toast in. Here is an example:

<wc-beru id="first" position="bottom-right"></wc-beru>
<wc-beru id="second" position="bottom-left"></wc-beru>

However, if we do not specify which instance we want to render our toast in, it will default to the first wc-beru element it finds. Assuming we want to render the toast in our element with the identifier second, we proceed to use our beruId:

toast.display('Hello from wc-beru', {
    description: 'This is a message from wc-beru',
    beruId: 'second'
})