Home

React SDK

The Software Development Kit (SDK) gives you tools to build integrations to Signatu using the React UI library. React 16.8 or higher is required.

See Theming for information about how to style the components.

React Context

The library provides a React Context that you can use to provide the consent components with configuration. You can override the values by providing direct props to the component.

IMPORTANT - make sure you understand the security implications of allowing API access tokens to your front-ends / apps.

ConsentConfigContext

import {
ConsentConfigContext,
ConsentButtons
} from '@signatu/sdk/react/consent'
const config {
accessToken: "my access token"
}
const MyComponent = props => (
<ConsentConfigContext.Provider value={config}>
<ConsentButtons {...props} />
</ConsentConfigContext.Provider>
)

ConsentRequestContext

import { ConsentRequestContext } from '@signatu/sdk/react/consent'
const consentConfig {
subject: "subject",
target: "https://consent/target",
issuer: "https://mycomponany"
}
const MyComponent = props => (
<ConsentRequestContext.Provider value={consentConfig}>
<ConsentButtons />
<ConsentButtons target="https://another target"/>
</ConsentRequestContext.Provider>
)

Theming

All Signatu React components supports theming, allowing you to style the components using your own colors and typography. Under the hood we use react-jss to dynamically create CSS classes and inject them into the DOM.

For this to work the Signatu components must be contained in a ThemeProvider that will inject the theme onto the components. Use the provided createTheme function to create your theme. For example:

import { ThemeProvider, createTheme } from '@signatu/sdk/react/styles';
const myTheme = createTheme({
typography: {
fontFamily: "Open Sans",
fontWeight: 300,
title: {
fontFamily: "Lato",
fontWeight: 600
},
subtitle: {
fontFamily: "Lato",
fontWeight: 400
}
},
palette: {
text: {
main: "#444"
},
primary: {
main: "#0b3297",
contrastText: "#fff"
},
secondary: {
main: "#15bad2",
contrastText: "#fff"
}
}
})
class MyComponent extends React.Component {
render() {
return <ThemeProvider theme={myTheme}>
<ConsentButton />
</ThemeProvider>
}
}

Theme settings

The most relevant theming options for the consent components are:

  • palette.primary.main: the primary color used as background for e.g., default buttons, cookie banner.
  • palette.secondary.main: the secondary color used in combination with the primary color.
  • palette.balanced.main: the color used for affermative actions, e.g., giving consent.
  • palette.attention.main: the color used for decline actions, e.g., refusing consent.
  • typography.fontFamily: the default font.
  • typography.fontWeight: the default font weight.
  • typography.fontSize: the default font size.
  • typography.button.*: the button typography. Set font, colors and other CSS properties here (e.g., fontSize, textTransform, background, etc).
  • typography.title.*: the title typography. Set font and colors here (e.g., fontSize, color, background).
  • typography.subtitle.*: the title typography. Set font and colors here (e.g., fontSize, color, background).

Note that you can either use camelCase (e.g., fontSize) or regular HTML names (e.g., 'font-size') for the HTML properties.

The Consent React components are available from @signatu/sdk/react/consent.

import { ConsentCheckbox } from '@signatu/sdk/react/consent'

The library contains the following React consent components:

  • ConsentCheckbox: Consent request using checkbox.
  • ConsentButtons: Consent request using buttons.
  • ConsentContract: Consent request for Contracts. Will not allow withdrawal of acceptance.
  • TrackerConsent: consent component for Tracker data - e.g., from a Signatu Trackerdetect.
  • DataProcessingGroup: consent component for a Data Processing Group managed in Signatu. Creates a dashboard of all the DataProcessingSpec elements in the group.
  • DataProcessingSpec: consent component for a single Data Processing Spec managed in Signatu.
  • DataProcessingConsent: consent component for PolicyDataProcessing data - e.g., from a Privacy Policy generated with Signatu.
  • PolicyConsentDashboard: consent component to generate a dashboard of all (or subset) of consent targets in a signatu Privacy Policy.
  • CookieBanner: banner for consent to cookie / 3rd party usage.

The library also provides a function that generates higher-order components from these base components:

  • makeConsentPopup(): wrap any of the above components in a lightbox popup.
  • makeCondConsentPopup(): wrap any of the above components in a conditional popup that will open only if the user previously has taken no action.

props

The components support (a subset of) the following props:

  • subject: string - the subject principal.
  • issuer: string - The issuer principal, typically the URL of the Data Controller website.
  • target: string - what is being consented to, e.g., a URL.
  • source: string (optional) - where the consent request was placed, e.g., a the URL of the webpage.
  • scope: string (optional) - the scope of the consent within the target. In a policy this is typically the clause ID, in a Data Processing Group this is the Data Processing Spec ID.
  • language: string (optional) - ISO 639-1 language code of the language to render. Default: en.
  • optOut: boolean - if set, default the action to true if no ConsentEvent is found. Default is false.
  • delegate: string (optional) - the delegate principal, e.g., a customer service representative ID.
  • type: ConsentActionType(optional) - BUTTONS or CHECKBOX. Defaults to CHECKBOX.
  • text: string | JSX.Element (optional) - consent request text or element.
  • title: string | JSX.Element (optional) - consent request title text or element
  • subtitle: string | JSX.Element (optional) - Consent request subtitle text or element.
  • onLoaded(consent?: ConsentEvent): void (optional) - callback function called when the Consent Event is loaded from Signatu.
  • onAction(consent: ConsentEvent): void (optional) - callback function called when user has taken action - i.e., accepted or refused.

Example usage

import React from 'React';
import {Consent} from '@signatu/consent';
import {
makeConsentPopup,
ConsentCheckbox,
ConsentButtons,
DataProcessingConsent,
TrackerConsent,
PolicyConsentDashboard
} from '@signatu/consent-react';
import { ThemeProvider, createTheme } from '@signatu/styles';
const config = {
apiKey: 'MY_API_KEY',
accessToken: 'MY_ACCESS_TOKEN'
}
/** Make a popup of the ConsentButtons component */
const ConsentCheckboxPopup = makeConsentPopup(ConsentCheckbox)
/* Now embed the components */
const myTheme = createTheme({
palette: {
primary: {
main: "blue"
}
}
})
<ThemeProvider theme={myTheme}>
<ConsentCheckbox
id="checkbox_consent"
config={config}
subject={Consent.anonSubject()}
issuer="signatu.com"
target="signatu.com/demo">
<div>Contents of the consent message</div>
</ConsentCheckbox>
<ConsentCheckboxPopup
id="buttons_consent"
config={config}
subject={Consent.anonSubject()}
issuer="signatu.com"
target="signatu.com/demo/buttons">
<div>Contents of the consent message</div>
</ConsentCheckboxPopup>
<DataProcessingConsent
config={config}
title="Direct Marketing"
subtitle={<div>You can use elements as title and subtitle as well</div>}
subject={Consent.anonSubject()}
issuer="signatu.com"
target="signatu.com/demo"
language='en'
dataprocessing={processing}
>
</DataProcessingConsent>
<TrackerConsent
config={config}
tracker='googleanalytics'
title='Google Analytics'
subject={Consent.anonSubject()}
issuer="signatu.com"
target={`signatu.com/trackers`}
scope='googleanalytics'
onAction={(consent: ConsentEvent) => {}}
onLoaded={(consent?: ConsentEvent) => {}}>
<div>
We use {this.state.selectedTracker.name} to analyze our web traffic to enable us to improve the user experience.
</div>
</TrackerConsent>
<PolicyConsentDashboard
config={consentConfig}
title="Policy Dashboard"
subtitle={<span>You can withdraw your consent at any time in your <a href="https://signatu.com/app/account">Account Page</a>.</span>}
elementIds={/** Array of element IDs to include. If not specified include all clauses */}
subject={Consent.anonSubject()}
policyId="123"
language='en'
/>
</ThemeProvider>

Typescript

Typescript typings are included with the library.