Custom Elements (beta)

You can write code for to replace one of our default components with your custom implementation. This feature comes in handy when CSS customization is not enough to get the look you are going for. We already ship the tools required to write these custom components with the SDK, so nothing extra is required.

How-to

Let's jump right into some code:

import { IntegryJS, html } from '@integry/sdk';

const integryHandle = new IntegryJS({
  appKey,
  hash,
  deploymentId,
  userId,
  userConfig: {
    customComponents: {
      flowCard: (props) => html`<div>${props.name}</div>`,
    },
  },
});

To add a custom component:

1. Add a customComponents key under the userConfig object in the SDK init config.
2. Add a key for the component you want to customize (in this case, this is flowCard).
3. Set your custom component as the value.

Let's take a closer look at that function definition:

(props) => html`<div>${props.name}</div>`;

This function is passed a parameter called props, and returns a component.

• The props parameter contains all of the information and event handlers that are available for this component
• You consume these in a special template literal which forms the body of your custom component
• Integry SDK will swap out the default component for this custom one when it renders

Here's a full example:

/**
  props:
    name: string;
    description: string;
    imgUrl: string;
    tags: string;
    layout: 'GRID' | 'LIST';
    handleClick: () => void;
 */
(props) => IntegryJS.html`
  <div>
    <div>
      <p>${props.name}</p>
      <p>${props.description}</p>
      <img src=${props.imgUrl} alt="logo" width="40" />
    </div>
    <button onclick=${props.handleClick}>Setup</button>
  </div>
`;

Here's the result:

info

The html function that is exposed by the SDK package is powered by htm. Please visit their documentation for more information on how html works.