This library provides a set of components that should be used in every Zen-GRC micro-frontend app.
yarn add @reciprocity/zen-ui
import { defineCustomElements } from '@reciprocity/zen-ui/loader';
defineCustomElements(window, { transformTagName: tagName => `YOUR_APP_ID-${tagName}` });
Notice the YOUR_APP_ID should be a single word without hyphens.
After importing components, just use them as any regular html element with the added prefix (let's take comply as example):
<comply-zen-dropdown>
<comply-zen-option value="orange">Orange</comply-zen-option>
<comply-zen-option value="lemon">Lemon</comply-zen-option>
<comply-zen-option value="apple">Apple</comply-zen-option>
</comply-zen-dropdown>
Notes here apply to all components from Zen UI library. Read this before consuming these components.
When registering ZenUI components in you application make sure that you're using a non-existent prefix to avoid any unexpected behavior by name collision.
When working with a React application, instead of manually creating wrappers for the web components, you can use this library React bindings and import the components directly into your JSX.
First, install the bindings alognside the library:
yarn add @reciprocity/zen-ui @reciprocity/zen-ui-react
Then, setup the library and the bindings:
import { defineCustomElements } from '@reciprocity/zen-ui/loader';
import { setTagTransform } from '@reciprocity/zen-ui-react';
const transformTagName = tagName => `YOUR_APP_ID-${tagName}`;
defineCustomElements(window, { transformTagName });
setTagTransform(transformTagName);
- Since using a prefix is required, you need to set it both for the library and the bindings.
- The reason you need to do it "twice" it's because
defineCustomElements
supports extra options that the bindings don't.
Once the library and bindings are configured, you can just create a component and import the components:
import React from 'react';
import { ZenDropdown, ZenOption } from '@reciprocity/zen-ui-react';
export const MyDropdown = () => (
<ZenDropdown>
<ZenOption value="orange">Orange</ZenOption>
<ZenOption value="lemon">Lemon</ZenOption>
<ZenOption value="apple">Apple</ZenOption>
</ZenDropdown>
);