FAQ

Frequently Asked Questions

How do I use Vivid's elements?

First install the element you wish to use. Say you need vwc-button. Run:

npm i @vonage/vwc-button

Then import the component to your project

import "@vonage/vwc-button"

From now on, the element vwc-button will be registered and ready to be used in your code:

const myButton = document.createElement('vwc-button');
document.body.querySelector('main').appendChild(myButton);

Why aren't Vivid's packages pre-bundled?

Developing without bundling is a design approach we chose to take, following open standards.

Our application designs in figma are not aligned with Vivid design system or actual components. Can we still integrate Vivid in our application non the less?

Yes! this is a common concern - there are new guidelines and process for designing in Vonage which all design teams across Vonage are aware of and aligned with. Designs of components are centralised in vivid from all design teams. Engineers across all vonage use vivid components directly. This simple plan assures single look-and-feel across all apps and relieve engineering teams from being distracted by design based development and the burden of keep syncing with designers in each LOB individually. Any design (or behavioural) issues regarding components will be assigned to vivid team to resolve.

How can I contribute my own element to Vivid?

We welcome and encourage any contribution to Vivid's codebase. The best way to get going would be to open a new branch off "master", copy the folder of any other existing elements defined under components, rename it to match your element. Then, replace the contents of the src folder with your own code (typescript and scss files), add tests to the tests folder, Storybook stories to the stories folders, and make sure that the configuration of "package.json" reflects the requirements of your element. Then just add your element's folder Vivid's main tsconfig.json file under "references". Now open a new pull request

Can I use HTML forms organically?

Standard HTML form behaviour is, unfortunately, not organically supported with Vivid's elements at this stage. This means that in order to submit data using Vivid's input elements, you'd need to individually collect the data from them, then handle it in your code (validate, send to server etc.).

How do I consume Vivid's elements in React?

Custom elements are supported in React. You can simply use them as you would any other React DOM element (see this documentation). To help you streamline the handling of custom components, we've authored a small utility that creates a React wrapper component which deals with some unique interface concerns such as toggling attributes and custom events.

Which browsers are supported?

Almost all evergreen browsers support custom elements (v1) today. You can check this list.