Darz Client SDK

Installation

npm install @darz-io/client-sdk

Usage

Consent

React Hook

useConsent(options: ConsentOptions): ConsentStatus

Consent message can be consumed using the useConsent() hook

const consentStatus = useConsent(options)

ConsentOptions

• apiKey - Darz API Key created in the management console for the consuming application
• variant - Consent variant, as defined in the management console, to be used by the application and get the designated consent message and options
• clientId - Optional - ID for the client responding to the consent (i.e. user identifier). If omitted, will be automatically generated and cached in sessionStorage

ConsentStatus

• loading - true if still loading consent status, false if the status is available, or and error occurred
• error - The message of the error if status loading failed, or null in case of successful status retrieval
• clientId - ID for the client responding to the consent. If a clientId was explicitly passed to the hook, it is set to the given ID. Otherwise, it is set to and auto-generated (cached in sessionStorage)
• shouldDisplay - true if the consent message should be displayed (no recorded response, new message content, etc.). false if it should't be displayed (has a recorded response, the consent is disabled, etc.)
• userChoice - The choice the user made as a response to the consent message
• content - Consent message content - the text to be displayed to the user
• options - Consent options, usually used to render action buttons to accept/reject/get more info on the consent

Example

import React from "react";
import { ConsentChoice, useConsent } from "@darz-io/client-sdk";

const API_KEY = {
	id: "my-api-key-id",
	key: "my-api-key-key",
};

export function MyConsentMessage() {
	const { 
		loading, 
		error, 
		shouldDisplay, 
		userChoice, 
		content, 
		options 
	} = useConsent({
		apiKey: API_KEY,
		variant: "my-application",
		clientId: myUserObject.id
	});

	if (error) {
		return <div>Error {error}</div>;
	}

	if (loading) {
		return <div>loading...</div>;
	}

	return (
		<>
			<div>User consent</div>
			{
				shouldDisplay ?
					(
						<div>
							<div>{content}</div>
							<div>
								{
									Object.values(options)
										.map(opt => <button key={opt.type} onClick={opt.callback}>{opt.label}</button>)
								}
							</div>
						</div>
					) :
					(
						<div>User choice: {ConsentChoice[userChoice]}</div>
					)
			}
		</>
	);
}