### Install Didomi React via npm Source: https://github.com/didomi/react/blob/master/README.md Use npm to add the @didomi/react library to your project dependencies. ```sh $ npm install --save @didomi/react ``` -------------------------------- ### getConfig() - Get SDK configuration Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the SDK configuration object. ```APIDOC ### Method `getConfig(): any` ### Description Returns the SDK configuration. ### Returns `any` - The SDK configuration object. ``` -------------------------------- ### getPurposes() - Get purposes list Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the list of purposes. ```APIDOC ### Method `getPurposes(): any` ### Description Returns the list of purposes. ### Returns `any` - List of purposes. ``` -------------------------------- ### getExperiment() - Get active experiment Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the active experiment data. ```APIDOC ### Method `getExperiment(): any` ### Description Returns the active experiment data. ### Returns `any` - Active experiment data. ``` -------------------------------- ### getVendors() - Get vendors list Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the list of vendors. ```APIDOC ### Method `getVendors(): any` ### Description Returns the list of vendors. ### Returns `any` - List of vendors. ``` -------------------------------- ### IDidomiConfig Object Structure Source: https://github.com/didomi/react/blob/master/_autodocs/configuration.md A comprehensive example of the IDidomiConfig object structure, including app settings, languages, notice preferences, theme styling, and integrations. ```javascript { app: { ignoreCountry: true, privacyPolicyURL: 'http://example.com', name: 'Example', apiKey: '', logoUrl: 'http://logo.png', vendors: { iab: { // Either 'all' (optionally with 'exclude') OR 'include' all: true, exclude: [1], // OR include: [3], }, didomi: ['google'], custom: [ { id: 'custom-vendor', // Unique vendor ID name: 'Custom Vendor', // Display name purposeIds: ['cookies'], // Purposes to collect consent for, per vendor policyUrl: 'http://www.vendor.com/privacy-policy', }, ], }, customPurposes: [ { id: 'my_custom_purpose', name: { en: 'My custom purpose' }, description: { en: 'Description' }, }, ], notice: { content: { html: { en: element => { /* render a React component into the element, or a plain string */ }, }, }, }, }, languages: { enabled: ['en', 'fr', 'es', 'nl', 'ca', 'it', 'de', 'pt'], default: 'fr', }, notice: { position: 'popup', // 'popup' | 'bottom' | ... closeOnClick: true, closeOnClickBackdrop: false, daysBeforeShowingAgain: 0, textAlignment: 'left', learnMorePosition: null, learnMoreMargin: '20px 0 0 0', logoAlignment: 'flex-start', content: { popup: { en: 'Text' }, notice: { en: 'Text' }, dismiss: { en: 'Text' }, learnMore: { en: 'Text' }, }, }, preferences: { defaultChoice: true, enableAllButtons: true, content: { text: { en: 'Text' }, title: { en: 'Text' }, disagreeToAll: { en: 'Text' }, agreeToAll: { en: 'Text' }, save: { en: 'Text' }, textVendors: { en: 'Text' }, subTextVendors: { en: 'Text' }, }, information: { enable: true, content: { text: { en: 'Text' }, learnMore: { en: 'Text' }, agreeAndClose: { en: 'Text' }, }, }, }, theme: { color: '#3F51B5', // Principal color used by the SDK linkColor: '#3F51B5', // Link color in the notice/popup font: 'Arial', // Font used by the SDK buttons: { regularButtons: { // Learn more / disagree / disagree-to-all buttons backgroundColor: '#eeeeee', textColor: '#999999', borderColor: 'rgba(34, 34, 34, 0.2)', borderWidth: '1px', borderRadius: '0px', }, highlightButtons: { // Agree / save / agree-to-all buttons backgroundColor: 'rgb(194, 39, 45)', textColor: '#ffffff', borderColor: 'rgba(194, 39, 45, 0.3)', borderWidth: '1px', borderRadius: '0px', }, }, }, tagManager: { provider: 'gtm', }, integrations: { vendors: { google: { enable: true, eprivacy: true, }, }, refreshOnConsent: true, // Reload ads after consent is given }, } ``` -------------------------------- ### getUserStatus() - Get user consent status (deprecated) Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Deprecated. Returns the user consent status as IUserStatus with global, consent, and legitimate_interest buckets per purpose and vendor. Use getCurrentUserStatus instead. ```APIDOC ### Method `getUserStatus(): IUserStatus` ### Description Deprecated - Please use getCurrentUserStatus instead. Returns the user consent status as IUserStatus with global/consent/legitimate_interest buckets per purpose and vendor. ### Returns `IUserStatus` - The user consent status. ``` -------------------------------- ### configure(): any Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md (Re)configures the SDK; returns the configuration result, type any. ```APIDOC ## configure(): any ### Description (Re)configures the SDK; returns the configuration result, type any. ### Method configure ### Returns any - The configuration result. ``` -------------------------------- ### Advanced usage with local configuration override Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-sdk-component.md Demonstrates initializing the SDK with a local configuration object and specific geographic settings. Uses a ready handler to trigger the preferences modal programmatically. ```jsx import { DidomiSDK } from '@didomi/react'; const didomiConfig = { app: { apiKey: '502cef93-8f2c-4f39-9d9a-77f95de27f0b', vendors: { iab: { all: true } }, customPurposes: [ { id: 'my_custom_purpose', name: { en: 'My custom purpose' }, description: { en: 'Custom description' }, }, ], }, notice: { position: 'popup' }, languages: { enabled: ['en', 'fr'], default: 'en' }, }; function App() { const handleReady = (didomi) => { if (didomi) { didomi.preferences.show('purposes'); } }; return ( ); } ``` -------------------------------- ### Instantiate DidomiSDK with local configuration Source: https://github.com/didomi/react/blob/master/README.md Initializes the DidomiSDK component with a local configuration object and various event listeners for notice and preference interactions. ```jsx const didomiConfig = { app: { vendors: { iab: { all: true } } } } ... console.log('Didomi SDK is loaded and ready', didomi)} onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)} onNoticeShown={() => console.log('Didomi Notice Shown')} onNoticeHidden={() => console.log('Didomi Notice Hidden')} onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')} onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')} onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')} onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')} onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')} onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)} onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)} onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')} onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')} onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)} onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)} onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')} /> ``` -------------------------------- ### getLanguage() - Get current language Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the current language of the SDK. ```APIDOC ### Method `getLanguage(): any` ### Description Returns the current language. ### Returns `any` - The current language. ``` -------------------------------- ### getTranslationAsHTML() - Get translation as HTML Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the current translation as HTML. ```APIDOC ### Method `getTranslationAsHTML(): any` ### Description Returns the current translation as HTML. ### Returns `any` - Current translation as HTML. ``` -------------------------------- ### Basic usage with Didomi Console configuration Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-sdk-component.md Initializes the DidomiSDK component using configuration parameters directly from the Didomi Console. Includes event handlers for SDK readiness, consent changes, and notice interactions. ```jsx import { DidomiSDK } from '@didomi/react'; function App() { return ( { console.log('SDK ready', didomi.version); console.log('Consent required?', didomi.isConsentRequired()); }} onConsentChanged={(cwtToken) => { console.log('Consent changed, token:', cwtToken); }} onNoticeShown={() => console.log('notice.shown')} onPreferencesClickPurposeAgree={(purposeId) => console.log('purpose agreed', purposeId) } /> ); } ``` -------------------------------- ### reset(): any Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Resets the SDK state; returns any. ```APIDOC ## reset(): any ### Description Resets the SDK state; returns any. ### Method reset ### Returns any - The reset result. ``` -------------------------------- ### getRequiredVendorIds() - Get required vendor IDs Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the IDs of vendors for which consent is required. ```APIDOC ### Method `getRequiredVendorIds(): any` ### Description Returns the IDs of vendors for which consent is required. ### Returns `any` - IDs of required vendors. ``` -------------------------------- ### getRequiredPurposeIds() - Get required purpose IDs Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the IDs of purposes for which consent is required. ```APIDOC ### Method `getRequiredPurposeIds(): any` ### Description Returns the IDs of purposes for which consent is required. ### Returns `any` - IDs of required purposes. ``` -------------------------------- ### Non-trivial usage: consent actions and event listeners Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Demonstrates advanced usage with event listeners for 'sync.ready' and 'api.error', showing the preferences dialog if consent is required, and a button that opens a transaction, agrees to all, sets a specific consent, and reconfigures the SDK. ```jsx import { DidomiSDK } from '@didomi/react'; function App() { let didomiObject = null; const onReady = (didomi) => { didomiObject = didomi; didomi.on('sync.ready', () => console.log('sync complete')); didomi.on('api.error', () => console.error('Didomi API error')); if (didomi.isConsentRequired()) { didomi.preferences.show('purposes'); } }; const agreeToEverything = () => { if (didomiObject) { didomiObject.openTransaction(); didomiObject.setUserAgreeToAll(); didomiObject.setUserConsentStatus('cookies', 1, true); didomiObject.configure(); } }; return (
); } ``` -------------------------------- ### Instantiate DidomiSDK component Source: https://github.com/didomi/react/blob/master/README.md Configure the DidomiSDK component with your API key and notice ID. This component supports various event callbacks for tracking user interactions with the consent notice. ```jsx console.log('Didomi SDK is loaded and ready', didomi)} onConsentChanged={cwtToken => console.log('A consent has been given/withdrawn', cwtToken)} onNoticeShown={() => console.log('Didomi Notice Shown')} onNoticeHidden={() => console.log('Didomi Notice Hidden')} onNoticeBackdropclick={() => console.log('Didomi Notice Backdrop Click')} onNoticeClickAgree={() => console.log('Didomi Notice Click Agree')} onNoticeClickMoreInfo={() => console.log('Didomi Notice Click More Info')} onPreferencesClickAgreeToAll={() => console.log('Didomi Preferences Click Agree to All')} onPreferencesClickDisagreeToAll={() => console.log('Didomi Preferences Click Disagree to All')} onPreferencesClickPurposeAgree={purposeId => console.log('Didomi Preferences Click Purpose Agree', purposeId)} onPreferencesClickPurposeDisagree={purposeId => console.log('Didomi Preferences Click Purpose Disagree', purposeId)} onPreferencesClickViewVendors={() => console.log('Didomi Preferences Click View Vendors')} onPreferencesClickSaveChoices={() => console.log('Didomi Preferences Click Save Choices')} onPreferencesClickVendorAgree={vendorId => console.log('Didomi Preferences Click Vendor Agree', vendorId)} onPreferencesClickVendorDisagree={vendorId => console.log('Didomi Preferences Click Vendor Disagree', vendorId)} onPreferencesClickVendorSaveChoices={() => console.log('Didomi Preferences Click Vendor Save Choices')} /> ``` -------------------------------- ### getUserConsentToken() - Get consent web token Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the current consent web token (CWT). ```APIDOC ### Method `getUserConsentToken(): any` ### Description Returns the current consent web token (CWT). ### Returns `any` - The consent web token. ``` -------------------------------- ### Render custom HTML in the notice Source: https://github.com/didomi/react/blob/master/README.md Provide a raw HTML string directly in the notice.content.html configuration to display custom content. ```js const didomiConfig = { app: { apiKey: '', notice: { content: { html: { en: '
Custom Notice
' } } } } } ... ``` -------------------------------- ### getCurrentUserStatus() - Get current user consent status Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the current consent status of the user. ```APIDOC ### Method `getCurrentUserStatus(): ICurrentUserStatus` ### Description Returns the current consent status of the user. ICurrentUserStatus is documented in types.md. ### Returns `ICurrentUserStatus` - The current user consent status. ``` -------------------------------- ### React component integrating Didomi SDK with configuration and event handlers Source: https://github.com/didomi/react/blob/master/README.md Use this snippet to set up the Didomi SDK in a React component. It defines a configuration object with app, notice, and language settings, and includes handlers for SDK readiness and consent changes. The component renders the DidomiSDK component with the config and event callbacks, and provides a button to set user agreement to all. ```jsx import React, { Component } from 'react' import { DidomiSDK } from '@didomi/react' /** * This is the configuration object that will set the Didomi SDK */ const didomiConfig = { app: { name: 'Didomi', apiKey: 'API_KEY', vendors: { iab: { all: true, version: 2 } } }, notice: { position: 'bottom' }, languages: { enabled: ['fr', 'en', 'es'], default: 'fr' } } class DidomiDemo extends Component { constructor(props) { super(props); this.didomiObject = {}; } /** * Called once we have the callback from the SDK informing that Didoni is loaded and ready */ onDidomiReady(didomi) { this.didomiObject = didomi; console.log('Didomi Ready - Is the consent required ? : ', this.didomiObject.isConsentRequired()); console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1)); console.log('Didomi Ready - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1)); } /** * Called everytime the consent changes */ consentHasChanged(cwtToken) { console.log('Didomi Consent Changed - cwtToken : ', cwtToken); console.log('Didomi Consent Changed - Is the consent required ? : ', this.didomiObject.isConsentRequired()); console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 : ', this.didomiObject.getUserConsentStatusForVendor(1)); console.log('Didomi Consent Changed - Do we have the consent for the vendor IAB 1 and the purpose cookies : ', this.didomiObject.getUserConsentStatus('cookies', 1)); } render() { return

Didomi React Demo

} } ``` -------------------------------- ### getPurposeById(id) - Get purpose by ID Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the purpose object for the given purpose ID. ```APIDOC ### Method `getPurposeById(id)` ### Description Returns the purpose object for the given purpose ID. ### Parameters - **id** (ConsentID: number | string) - Required - Purpose ID. ### Returns `any` - The purpose object. ``` -------------------------------- ### Basic usage: reading consent state in onReady Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Shows how to use the DidomiSDK component with an onReady callback to read consent state. Logs the SDK version, whether consent is required, consent status for a specific purpose/vendor, and the current user status using the new API. ```jsx import { DidomiSDK } from '@didomi/react'; function App() { const onReady = (didomi) => { console.log('SDK version:', didomi.version); console.log('Consent required?', didomi.isConsentRequired()); console.log( 'Consent for purpose "cookies" / vendor 1:', didomi.getUserConsentStatus('cookies', 1), ); console.log( 'Consent status (new API):', didomi.getCurrentUserStatus(), ); }; return ; } ``` -------------------------------- ### getVendorById(id) - Get vendor by ID Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the vendor object for the given vendor ID. ```APIDOC ### Method `getVendorById(id)` ### Description Returns the vendor object for the given vendor ID. ### Parameters - **id** (ConsentID: number | string) - Required - Vendor ID. ### Returns `any` - The vendor object. ``` -------------------------------- ### openTransaction(): any Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Opens a transaction (batch) so multiple consent changes are applied atomically; returns any. ```APIDOC ## openTransaction(): any ### Description Opens a transaction (batch) so multiple consent changes are applied atomically; returns any. ### Method openTransaction ### Returns any - The transaction object or result. ``` -------------------------------- ### getUserConsentStatusForAll() - Get aggregate consent status Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the aggregate consent status with enabled and disabled ID arrays for purposes and vendors. ```APIDOC ### Method `getUserConsentStatusForAll(): IUserConsentStatus` ### Description Returns the aggregate consent status with enabled and disabled ID arrays for purposes and vendors. ### Returns `IUserConsentStatus` - The aggregate consent status. ``` -------------------------------- ### getRequiredVendors(type?) - Get required vendors with optional type filter Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the required vendors, optionally filtered by vendor type. ```APIDOC ### Method `getRequiredVendors(type?)` ### Description Returns required vendors, optionally filtered by vendor type. ### Parameters - **type** (string) - Optional - Vendor type filter. ### Returns `any` - Required vendors. ``` -------------------------------- ### IDidomiObject Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Documentation for the IDidomiObject interface, which describes the shape of the Didomi SDK object exposed at runtime as window.Didomi and handed to the onReady prop callback of DidomiSDK. ```APIDOC ## IDidomiObject ### Description Interface describing the shape of the Didomi SDK object exposed at runtime as `window.Didomi` and handed to the `onReady` prop callback of `DidomiSDK`. The interface is declared but not implemented in this package; the implementation is the Didomi Web SDK loaded via `loader.js`. ### Interface ```ts export interface IDidomiObject { version: string; on(event: EventType, eventHandler: Function): void; preferences: IPreferencesObject; notice: INoticeObject; policy: IPolicyObject; Purposes: { [key: string]: any; }; getConfig(): any; getExperiment(): any; getLanguage(): any; getPurposes(): any; getRequiredPurposeIds(): any; getTranslationAsHTML(): any; getCurrentUserStatus(): ICurrentUserStatus; /** * @deprecated Please use getCurrentUserStatus instead */ getUserStatus(): IUserStatus; getUserConsentStatusForAll(): IUserConsentStatus; getUserConsentToken(): any; getVendors(): any; getRequiredVendorIds(): any; getUserConsentStatusForVendor(vendorId: ConsentID): ConsentStatus; getUserConsentStatusForPurpose(purposeId: ConsentID): ConsentStatus; getUserConsentStatus( purposeId: ConsentID, vendorId: ConsentID, ): boolean | undefined; getObservableOnUserConsentStatusForVendor(vendorId: ConsentID): any; getPurposeById(id: ConsentID): any; getVendorById(id: ConsentID): any; getRequiredPurposes(type?: string): any; getRequiredVendors(type?: string): any; setUserConsentStatusForAll(): void; setUserDisagreeToAll(): void; setUserAgreeToAll(): void; setConfigParameter(param: any, value: any): void; setUserConsentStatus( purposeId: ConsentID, vendorId: ConsentID, value: any, ): void; isConsentRequired(): boolean; isUserConsentStatusPartial(): boolean; shouldConsentBeCollected(): boolean; configure(): any; openTransaction(): any; reset(): any; // Add support for missing methods and properties [key: string]: any; } ``` ### Type Aliases - `ConsentID = number | string` - `ConsentStatus = boolean | undefined` ### Notes - The interface contains an index signature `[key: string]: any`, so any unlisted member is type-compatible, allowing code accessing unknown SDK features to compile. ``` -------------------------------- ### getUserConsentStatusForVendor(vendorId) - Get consent status for vendor Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns whether the user consented to the given vendor, or undefined when unknown or not applicable. ```APIDOC ### Method `getUserConsentStatusForVendor(vendorId)` ### Description Returns whether the user consented to the given vendor, or undefined when unknown/not applicable. ### Parameters - **vendorId** (ConsentID: number | string) - Required - Vendor ID. ### Returns `ConsentStatus` (boolean | undefined) - Whether the user consented to the vendor. ``` -------------------------------- ### getUserConsentStatusForPurpose(purposeId) - Get consent status for purpose Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns whether the user consented to the given purpose, or undefined when unknown or not applicable. ```APIDOC ### Method `getUserConsentStatusForPurpose(purposeId)` ### Description Returns whether the user consented to the given purpose, or undefined when unknown/not applicable. ### Parameters - **purposeId** (ConsentID: number | string) - Required - Purpose ID. ### Returns `ConsentStatus` (boolean | undefined) - Whether the user consented to the purpose. ``` -------------------------------- ### Render a custom React component in the notice Source: https://github.com/didomi/react/blob/master/README.md Use a callback function in the notice.content.html configuration to render a custom React component into the notice element. ```jsx import { render } from 'react-dom' class NoticeHTML extends Component { openPreferences() { Didomi.preferences.show() } render() { const noticeStyle = { color: 'red' } return (
Custom Notice HTML. Open Preferences { this.props.shouldDisplayMoreText &&

More Text

}
) } } const didomiConfig = { app: { apiKey: '', notice: { content: { html: { en: element => { render(, element) } } } } } } ... ``` -------------------------------- ### Verify SDK loader script URL Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-sdk-component.md Shows how to inspect the injected spcloader script element to verify the generated URL parameters after the component mounts. ```js // After mounting const script = document.getElementById('spcloader'); console.log(script.src); // https://sdk.privacy-center.org/abc-123/loader.js?platform=ctv&target_type=notice&target=n1&country=US®ion=CA ``` -------------------------------- ### getObservableOnUserConsentStatusForVendor(vendorId) - Get observable for vendor consent changes Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns an observable (subject) that notifies on consent changes for the given vendor. ```APIDOC ### Method `getObservableOnUserConsentStatusForVendor(vendorId)` ### Description Returns an observable (subject) notifying on consent changes for the vendor. Returned type is `any`. ### Parameters - **vendorId** (ConsentID: number | string) - Required - Vendor ID. ### Returns `any` - Observable (subject) for vendor consent changes. ``` -------------------------------- ### getUserConsentStatus(purposeId, vendorId) - Get consent status for purpose/vendor combination Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns whether the user consented to the given purpose and vendor combination. ```APIDOC ### Method `getUserConsentStatus(purposeId, vendorId)` ### Description Returns whether the user consented to the given purpose/vendor combination. ### Parameters - **purposeId** (ConsentID: number | string) - Required - Purpose ID. - **vendorId** (ConsentID: number | string) - Required - Vendor ID. ### Returns `boolean | undefined` - Whether the user consented. ``` -------------------------------- ### OnReadyFunction Source: https://github.com/didomi/react/blob/master/_autodocs/types.md Callback function type for when the Didomi SDK is ready. It receives the IDidomiObject and returns any value. ```APIDOC ## OnReadyFunction ### Description Callback function type for when the Didomi SDK is ready. It receives the IDidomiObject and returns any value. ### Type Signature ```ts export type OnReadyFunction = (didomi: IDidomiObject) => any; ``` ### Parameters - **didomi** (IDidomiObject) - Required - The `window.Didomi` SDK object, ready for use. ### Usage Used by: `IDidomiSDKProps.onReady`. ``` -------------------------------- ### setUserAgreeToAll() - Give consent for all Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Gives consent for all purposes and vendors. ```APIDOC ### Method `setUserAgreeToAll(): void` ### Description Gives consent for all purposes and vendors. ### Returns `void` ``` -------------------------------- ### Full configuration object for the config prop Source: https://github.com/didomi/react/blob/master/README.md Pass this object to the config prop to override Didomi Console settings. It includes app details, enabled languages, notice positioning and content, preference defaults, theme colors, tag manager provider, and Google integration. The vendors section supports either 'all' with optional 'exclude' or 'include' for manual vendor selection. ```JavaScript { app: { ignoreCountry: true, privacyPolicyURL: 'http://example.com', name: 'Example', apiKey: '', logoUrl: 'http://logo.png', vendors: { iab: { // You either choose the option 'all', with optionaly 'exclude', or the 'include' option where you add the vendors manually all: true, exclude: [1], // OR include: [3], }, didomi: ['google'], custom: [ { id: 'custom-vendor', // Unique ID for the vendor name: 'Custom Vendor', // Display name of the vendor purposeIds: ['cookies'], // List of purposes that you want to collect consent for, for this vendor policyUrl: 'http://www.vendor.com/privacy-policy' // URL to the privacy policy of the vendor } ] }, customPurposes: [ { id: 'my_custom_purpose', name: { en: 'My custom purpose', }, description: { en: 'Description', } } ] }, languages: { enabled: ['en', 'fr', 'es', 'nl', 'ca', 'it', 'de', 'pt'], // List of languages that visitors can use default: 'fr', // Default language to use if the visitor uses a language that is not enabled }, notice: { position: 'popup', closeOnClick: true, closeOnClickBackdrop: false, daysBeforeShowingAgain: 0, textAlignment: 'left', learnMorePosition: null, learnMoreMargin: '20px 0 0 0', logoAlignment: 'flex-start', content: { popup: { en: 'Text', }, notice: { en: 'Text', }, dismiss: { en: 'Text', }, learnMore: { en: 'Text', } } }, preferences: { defaultChoice: true, enableAllButtons: true, content: { text: { en: 'Text', }, title: { en: 'Text', }, disagreeToAll: { en: 'Text', }, agreeToAll: { en: 'Text', }, save: { en: 'Text', }, textVendors: { en: 'Text' }, subTextVendors: { en: 'Text' } }, information: { enable: true, content: { text: { en: 'Text', }, learnMore: { en: 'Text', }, agreeAndClose: { en: 'Text', } } } }, theme: { color: '#3F51B5', // Principal color used by the SDK linkColor: '#3F51B5', // Color used for the links in the notice/popup font: 'Arial', // Font used by the SDK buttons: { regularButtons: { // Learn more/disagree/disagree to all buttons. backgroundColor: '#eeeeee', textColor: '#999999', borderColor: 'rgba(34, 34, 34, 0.2)', borderWidth: '1px', borderRadius: '0px', }, highlightButtons: { // Agree/save/agree to all buttons. backgroundColor: 'rgb(194, 39, 45)', textColor: '#ffffff', borderColor: 'rgba(194, 39, 45, 0.3)', borderWidth: '1px', borderRadius: '0px', } } }, tagManager: { provider: 'gtm' }, integrations: { vendors: { // Setup the integration with Google (ask Didomi to share consent with Google tags) google: { enable: true, eprivacy: true } }, refreshOnConsent: true // by default, ads are reloaded after consent is given } ``` -------------------------------- ### getRequiredPurposes(type?) - Get required purposes with optional type filter Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Returns the required purposes, optionally filtered by purpose type (e.g., consent or legitimate_interest). ```APIDOC ### Method `getRequiredPurposes(type?)` ### Description Returns required purposes, optionally filtered by purpose type. ### Parameters - **type** (string) - Optional - Purpose type filter, e.g. `consent` or `legitimate_interest`. ### Returns `any` - Required purposes. ``` -------------------------------- ### SDK Script URL Structure Source: https://github.com/didomi/react/blob/master/_autodocs/configuration.md The base structure for the SDK script URL constructed by the component. ```text /loader.js? ``` -------------------------------- ### on(event, eventHandler) - Register event listener Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-object.md Registers a listener for an SDK event such as consent.changed, notice.*, preferences.*, and other events. The handler is invoked when the specified event fires. Returns void. ```APIDOC ### Method `on(event, eventHandler)` ### Description Registers a listener for an SDK event. Event types are enumerated in EventType and include api.error, consent.changed, consent.pendingchanged, integrations.consentpassedtodfp, all notice.* and preferences.* events, and sync.ready. Returns void. ### Parameters - **event** (EventType) - Required - One of the event names enumerated in EventType. - **eventHandler** (Function) - Required - Handler invoked when the event fires. ### Returns `void` ``` -------------------------------- ### Importing DidomiReact types Source: https://github.com/didomi/react/blob/master/_autodocs/types.md Shows how to import the DidomiReact namespace and use its exported types, such as IDidomiSDKProps. ```ts import DidomiReact = require('@didomi/react'); const props: DidomiReact.IDidomiSDKProps = { apiKey: '...' }; ``` -------------------------------- ### OnReadyFunction Type Source: https://github.com/didomi/react/blob/master/_autodocs/types.md Defines the callback function signature for when the SDK is ready. Used by IDidomiSDKProps.onReady. ```ts export type OnReadyFunction = (didomi: IDidomiObject) => any; ``` -------------------------------- ### DidomiSDK Props Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-sdk-component.md Lists all props accepted by the Didomi SDK React component, including their types, defaults, and descriptions. ```APIDOC ## DidomiSDK Props ### Description This component accepts the following props to configure the Didomi SDK and handle consent-related events. ### Props | Parameter | Type | Default | Description | |---|---|---|---| | `apiKey` | string | null | Public API key. If omitted, falls back to `config.app.apiKey` (`getApiKey`, `src/index.js:154-160`). | | `noticeId` | string | null | ID of the remote notice to target. When set, the loader uses `target_type=notice&target=` instead of the page hostname. | | `platform` | string | null | Platform targeting (e.g. `ctv`); only used when `noticeId` is set. Prepended as `platform=` to the loader URL. | | `config` | object (`IDidomiConfig`) | {} | Configuration passed to the SDK; assigned to `window.didomiConfig`. Full structure in [configuration.md](../configuration.md). | | `gdprAppliesGlobally` | boolean | true | Controls gating of consent collection per geolocation. Coerced at `src/index.js:170`: only the literal value `false` yields `false`; any other value (including `null`, `undefined`, `0`) yields `true`. Written to `window.gdprAppliesGlobally`. | | `onReady` | function | undefined | Called once the SDK is loaded; receives the `window.Didomi` object (see [Didomi object](didomi-object.md)). | | `onConsentChanged` | function | undefined | Called when consent is given/withdrawn; receives the consent web token (CWT) extracted from the event: `onConsentChanged(e.consentToken)`. | | `onNoticeShown` | function | undefined | Called on `notice.shown`. | | `onNoticeHidden` | function | undefined | Called on `notice.hidden`. | | `onNoticeBackdropclick` | function | undefined | Called on `notice.backdropclick` (backdrop of the popup notice clicked). | | `onNoticeClickAgree` | function | undefined | Called on `notice.clickagree`. | | `onNoticeClickMoreInfo` | function | undefined | Called on `notice.clickmoreinfo`. | | `onPreferencesClickAgreeToAll` | function | undefined | Called on `preferences.clickagreetoall`. | | `onPreferencesClickDisagreeToAll` | function | undefined | Called on `preferences.clickdisagreetoall`. | | `onPreferencesClickPurposeAgree` | function | undefined | Called on `preferences.clickpurposeagree`. Type declares `(purposeId: string) => any`. | | `onPreferencesClickPurposeDisagree` | function | undefined | Called on `preferences.clickpurposedisagree`. Type declares `(purposeId: string) => any`. | | `onPreferencesClickViewVendors` | function | undefined | Called on `preferences.clickviewvendors`. | | `onPreferencesClickSaveChoices` | function | undefined | Called on `preferences.clicksavechoices`. | | `onPreferencesClickVendorAgree` | function | undefined | Called on `preferences.clickvendoragree`. Type declares `(vendorId: string) => any`. | | `onPreferencesClickVendorDisagree` | function | undefined | Called on `preferences.clickvendordisagree`. Type declares `(vendorId: string) => any`. | | `onPreferencesClickVendorSaveChoices` | function | undefined | Called on `preferences.clickvendorsavechoices`. | | `sdkPath` | string | `'https://sdk.privacy-center.org/'` | Base path to load `loader.js` from (custom domain possible via reverse proxy). Must start with `http://`, `https://`, or `//` and end with `/`. | | `embedTCFStub` | boolean | true | When truthy, embeds the IAB TCF v2 stub before the loader script (`src/index.js:174-199`). | | `embedGPPStub` | boolean | false | When truthy, embeds the IAB GPP CMP API v1.1 stub before the loader script (`src/index.js:200-206`). | | `country` | string | null | Override user country; ISO 3166-1 alpha-2 (e.g. `FR`). Appended to the loader URL as `country=`. | | `region` | string | null | Override user region; ISO 3166-2 (e.g. `CA`, `IDF`). Appended as `region=`. | ### Notes - `DidomiSDK.propTypes` (`src/index.js:239-266`) declares all props as optional (`PropTypes.string`, `PropTypes.bool`, `PropTypes.func`, `PropTypes.object`), so `prop-types` only warns (development builds) on type mismatches; no prop is required. ``` -------------------------------- ### Import DidomiSDK from @didomi/react Source: https://github.com/didomi/react/blob/master/_autodocs/api-reference/didomi-sdk-component.md Named import of the DidomiSDK component from the @didomi/react package. ```javascript import { DidomiSDK } from '@didomi/react'; ``` -------------------------------- ### IDidomiConfig Interface Source: https://github.com/didomi/react/blob/master/_autodocs/types.md An open configuration object interface used by IDidomiSDKProps.config. ```ts interface IDidomiConfig { [key: string]: any; } ```