Message Web Component

A UI friendly message web component.

Usage

Step 1:

Reference component in the page:

<script src="https://unpkg.com/wc-message@latest/dist/index.js"></script>

Step 2:

Using custom element wc-message:

<wc-message id="message"></wc-message>

Step 3:

Get an element and change its properties:

<script>
  const el = document.querySelector('#message')

  el.textContent = 'Oops.'
  el.type = 'error'
  el.show = true
</script>

Component Properties

Controlling the state of a component using properties.

| Properties | Type | Default value | Optional value | | ---------- | ------- | ------------- | ---------------------------------------- | | show | boolean | false | true / false | | duration | number | 3000 | number of milliseconds | | type | string | success | info / success / error / warning |

Note ⚠️

Please use properties to change the state of the component instead of attributes, so that the state of the reactivity can be maintained.

<script>
  const el = document.querySelector('#message')
  
  // Good
  el.duration = 1000
  el.type = 'error'
  el.show = true

  // Bad
  el.setAttribute('duration', '1000')
  el.setAttribute('type', 'error')
  el.setAttribute('show', 'true')
</script>

License

MIT.