React Component Wrappers

Updated:

This tutorial assumes your codebase is registering the Web Components via connect from the q2-tecton-sdk, or from the q2-design-system library (Guide).

If you're using React to build out your feature or application, then you can make use of the React component wrappers that are published as a part of Tecton.

This gives you a number of benefits including:

  • Removes the need to use refs for adding event listeners to Web Components
  • Autocompletion
  • Better event handling
  • Type safety

Getting started

Making use of the React component wrappers only requires a couple of steps.

First, you will need to install the framework wrappers library:

  • NPM: npm i q2-tecton-framework-wrappers
  • Yarn: yarn add q2-tecton-framework-wrappers

Using the components

Once the package is installed you can start using the components by importing the ones you need, just like you would with any other components. They are all located in q2-tecton-framework-wrappers/dist/react.

import { Q2Btn, Q2Input, Q2Section } from "q2-tecton-framework-wrappers/dist/react";

function Example() {
  const onFullNameInput = (event) => {
    const {
      detail: { value },
    } = event.nativeEvent;
    console.log(value);
  };

  return (
    <Q2Section label="My Section" collapsible expanded>
      <Q2Input label="Full name" optional onInput={onFullNameInput}></Q2Input>
      <Q2Btn intent="workflow-primary">Submit</Q2Btn>
    </Q2Section>
  );
}

export default Example;