@dpa-it/dpa-id-partner-components-react NPM

DPA-ID Partner Components react library

React wrapper for the DPA ID partner components.

Install

To add the package to your project run

npm install @dpa-it/dpa-id-partner-components-react

Usage

You can import the component like any other react component.

import React, { useState } from 'react';
import { DpaIdAppswitcher, DpaIdUsericon, defineCustomElements } from '@dpa-it/dpa-id-partner-components-react';

defineCustomElements();

function Example() {
  return (
    <div>
      <DpaIdAppswitcher></DpaIdAppswitcher>
      <DpaIdUsericon></DpaIdUsericon>
    </div>
  );
}

Properties

Appswitcher

Property	Attribute	Description	Type	Default
`arrowDistanceRight`	`arrow-distance-right`	Distance of the arrow from the right border	`string`	`'1rem'`
`backgroundColor`	`background-color`	Color of the background	`string`	`'#fff'`
`fontColor`	`font-color`	Color of the font	`string`	`'rgb(33, 33, 33)'`
`iconColor`	`icon-color`	Color of the icon	`string`	`'rgb(33, 33, 33)'`
`outerSize`	`outer-size`	Inner size of the icon	`number`	`24`
`overlayRight`	`overlay-right`	Distance of the overlay from the right border of the wrapper	`string`	`'0'`
`overlayTop`	`overlay-top`	Distance of the overlay from the bottom border of the wrapper	`string`	`'30px'`

UserIcon

Properties

Property	Attribute	Description	Type	Default
`arrowDistanceRight`	`arrow-distance-right`	Distance of the arrow from the right border	`string`	`'1rem'`
`clientId`	`client-id`	Auth0 client ID, needed for logout	`string`	`''`
`firstname`	`firstname`	User firstname	`string`	`''`
`imgUrl`	`img-url`	Profile picture of the user to be displayed	`string`	`''`
`initials`	`initials`	User initials	`string`	`''`
`lastname`	`lastname`	User lastname	`string`	`''`
`logoutLabel`	`logout-label`	Button label to logout	`string`	`'Abmelden'`
`manageIdLabel`	`manage-id-label`	Button label that links to the DPA ID management dashboard	`string`	`'dpa ID verwalten'`
`overlayRight`	`overlay-right`	Distance of the overlay from the right border of the wrapper	`string`	`'0px'`
`overlayTop`	`overlay-top`	Distance of the overlay from the bottom border of the wrapper	`string`	`'30px'`
`service`	`service`	Service name (reflected to Useradmin myprofile URL as a parameter, if specified and not empty)	`string`	`''`
`size`	`size`	Icon size	`number`	`24`
`stageAuth0`	`stage-auth-0`	Stage of auth0 to refer to	`"dev" \\| "prod" \\| "staging"`	`'prod'`
`stageUseradmin`	`stage-useradmin`	Stage of user-administration to refer to	`"dev" \\| "prod" \\| "staging"`	`'prod'`