Usercentrics Client

Usercentrics is a consents management service for GDPR. You can setup your users privacy configs via UC panel. Each app/domain should have a separate set up in the UC panel. Each app/domain identify by its SETTING ID.

UC client is a React.js component that only needs your UC SETTING_ID for loading/showing/managing your GDPR stuff. This component use React context for providing all data and configs that client needs from UC.

This client support two main types of UC UI appearance, banner and wall. The default appearance is wall but you can change it by setting the appearance value to banner in the UC provider component options prop.

You also can control the content language by setting your language code in options prop. Most of the translations come from UC configs which you can edit them in the dashboard. But we have a small util function for handling those texts translations that are not part of UC base config and we add them to the UI. For now the component support 5 languages in i18n util function which you can see a usage of it in AcceptAndCloseCTA component. AcceptAndCloseCTA component is not part of UC general UI. It is a good example of what you can do with this library in compare of UC general UI library regarding customisation level.

Usage

You just need to install the client and then import the data provider and UI component in your app.

npm install @consumer/usercentrics-client

import { UsercentricsProvider, Usercentrics } from '@consumer/usercentrics-client';
import dynamic 'next/dynamic';

const DynamicUsercentrics = dynamic({
  loader: import('@consumer/usercentrics-client').then(mod => mod.Usercenrtrics),
  ssr: false, // Never load this on server side
})

const App = () => {
  return (
    <UsercentricsProvider settingId="SETTING_ID">
      <Usercentrics />
    </UsercentricsProvider>
  );
};

Development

This library created on top of TSDX. There are a few npm scripts that help you to develop and build the library:

• start: watches files and build development bundle
• build: buils production bundle

For developing the library you also have access to a simple Next.js app in the example directory. Example app uses relative-deps to link the library. After a new build of the library, run yarn prepare inside the example folder to update the library for the example.

• Inside of ./example run yarn
• Run yarn build then yarn start
• Open the localhost address displayed in the console

Release notes / semantic versioning

Make sure to follow these commit message conventions. To get a preview of how the upcoming release notes and the new version number will look run npx semantic-release --dry-run.

Deploying

During development to test in frontend

Use yarn link to link the packages locally.

1. Run yarn link inside this project
2. Run yarn build
3. Switch to where you want to use the package. For example to end-user-frontend-monorepo. Run yarn link @moebel.de/usercentrics-client in there

Afterwards you should run yarn unlink @moebel.de/usercentrics-client

Further reading: yarn docs

Before merging to master

Semantic-release can take care of the npm release if you follow conventional commits rules. After adding changes to git staging, create a git commit according to Conventional Commits.