@vertexvis/ui-react

React Bindings for Vertex Component library

Project contains React bindings for Vertex's component library SDK. These bindings are auto-generated from @vertexvis/ui.

Usage

Run yarn add @vertexvis/ui-react or npm install @vertexvis/ui-react to add the project as an NPM dependency.

The project includes a component loader, defineCustomElements, that needs to be invoked in order for the elements to be loaded and rendered.

import React from 'react';
import ReactDom from 'react-dom';
import { defineCustomElements } from '@vertexvis/ui-react';

function main() {
  defineCustomElement(window);
  ReactDom.render(<App />, document.querySelector("#app"));
}

main();

If you plan on targeting IE11 or Edge <= 18, you'll also need to supply polyfills for the Web Components APIs (Custom Elements, Shadow DOM, CSS Variables, etc). To include the polyfills, import applyPolyfills from the loader.

import React from 'react';
import ReactDom from 'react-dom';
import { applyPolyfills, defineCustomElements } from '@vertexvis/ui-react';

function main() {
  applyPolyfills().then(() => defineCustomElement(window));
  ReactDom.render(<App />, document.querySelector("#app"));
}

main();

Next, add one of the components to your React component.

import React from 'react';
import { VertexButton } from '@vertexvis/ui-react';

export function App() {
  return (<div>
    <VertexButton color="primary">
      Button
    </VertexButton>
  </div>);
}