@dpa-it/dpa-id-partner-components-react
v3.0.0
Published
React version of the DPA ID partner components
Downloads
454
Readme
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'
|
Events
| Event | Description | Type |
|----------|---------------------------------------------|---------------------|
| logout
| Event fired when clicking the logout button | CustomEvent<void>
|
Methods
redirectToAuth0() => Promise<void>
redirects to the correct logout url of auth0
Returns
Type: Promise<void>