Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 146 additions & 0 deletions packages/react-native-contentpass-cmp-consentmanager/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@
# @contentpass/react-native-contentpass-cmp-consentmanager

A [Consentmanager](https://www.consentmanager.net/) CMP adapter for `@contentpass/react-native-contentpass`. Bridges the Consentmanager SDK (`cm-sdk-react-native-v3`) to the Contentpass `CmpAdapter` interface, so the Contentpass consent layer can manage consent through Consentmanager.

## Installation

```bash
npm install @contentpass/react-native-contentpass-cmp-consentmanager
# or
yarn add @contentpass/react-native-contentpass-cmp-consentmanager
```

### Peer dependencies

- `@contentpass/react-native-contentpass`
- `cm-sdk-react-native-v3` — the Consentmanager React Native SDK must be installed and configured in your project

## Usage

First, initialize the Consentmanager SDK, then create the adapter using `createConsentmanagerCmpAdapter`:

```tsx
import CmSdkReactNativeV3, {
setUrlConfig,
setWebViewConfig,
checkAndOpen,
WebViewPosition,
BackgroundStyle,
BlurEffectStyle,
} from 'cm-sdk-react-native-v3';
import { createConsentmanagerCmpAdapter } from '@contentpass/react-native-contentpass-cmp-consentmanager';
import type { CmpAdapter } from '@contentpass/react-native-contentpass';

// 1. Configure the Consentmanager SDK
await setWebViewConfig({
position: WebViewPosition.FullScreen,
backgroundStyle: BackgroundStyle.dimmed('black', 0.5),
});

await setUrlConfig({
id: 'YOUR_CODE_ID',
domain: 'delivery.consentmanager.net',
language: 'EN',
appName: 'MyApp',
});

// 2. Initialize consent checking
await checkAndOpen(false);

// 3. Create the CMP adapter
const cmpAdapter: CmpAdapter = await createConsentmanagerCmpAdapter(CmSdkReactNativeV3);
```

The returned `cmpAdapter` can then be passed to `ContentpassConsentGate` from `@contentpass/react-native-contentpass-ui`, or used directly via the `CmpAdapter` interface.

### Full example

```tsx
import { useEffect, useState } from 'react';
import { View, Text } from 'react-native';
import CmSdkReactNativeV3, {
setUrlConfig,
setWebViewConfig,
checkAndOpen,
WebViewPosition,
BackgroundStyle,
} from 'cm-sdk-react-native-v3';
import { ContentpassSdkProvider } from '@contentpass/react-native-contentpass';
import { ContentpassConsentGate } from '@contentpass/react-native-contentpass-ui';
import { createConsentmanagerCmpAdapter } from '@contentpass/react-native-contentpass-cmp-consentmanager';
import type { CmpAdapter } from '@contentpass/react-native-contentpass';

export default function App() {
const [cmpAdapter, setCmpAdapter] = useState<CmpAdapter | null>(null);

useEffect(() => {
async function init() {
await setWebViewConfig({
position: WebViewPosition.FullScreen,
backgroundStyle: BackgroundStyle.dimmed('black', 0.5),
});
await setUrlConfig({
id: 'YOUR_CODE_ID',
domain: 'delivery.consentmanager.net',
language: 'EN',
appName: 'MyApp',
});
await checkAndOpen(false);
const adapter = await createConsentmanagerCmpAdapter(CmSdkReactNativeV3);
setCmpAdapter(adapter);
}

init().catch((error) => console.error('Failed to initialize CMP', error));
}, []);

if (!cmpAdapter) {
return <Text>Loading...</Text>;
}

return (
<ContentpassSdkProvider contentpassConfig={contentpassConfig}>
<ContentpassConsentGate
cmpAdapter={cmpAdapter}
contentpassConfig={contentpassConfig}
>
<View>
<Text>Your app content</Text>
</View>
</ContentpassConsentGate>
</ContentpassSdkProvider>
);
}
```

For further details on the Consentmanager SDK, see their [official documentation](https://help.consentmanager.net/books/cmp/page/reactnative-1-consentmanager-sdk-integration-9b0).

## API

### `createConsentmanagerCmpAdapter(sdk)`

Factory function that creates a `CmpAdapter` from an initialized Consentmanager SDK instance.

| Parameter | Type | Description |
|-----------|------|-------------|
| `sdk` | `CmSdkReactNativeV3Module` | The Consentmanager SDK default export (after `setUrlConfig` and `checkAndOpen` have been called). |

Returns `Promise<CmpAdapter>`.

The adapter fetches user status from the Consentmanager SDK during creation and automatically extracts purpose IDs and the vendor count.

### `CmpAdapter` methods provided

| Method | Description |
|--------|-------------|
| `acceptAll()` | Programmatically accepts all consent purposes via Consentmanager. |
| `denyAll()` | Programmatically rejects all consent purposes via Consentmanager. |
| `hasFullConsent()` | Checks whether all consent purposes are granted by querying each purpose status. |
| `onConsentStatusChange(callback)` | Registers a listener that fires whenever full-consent status changes. Returns an unsubscribe function. |
| `showSecondLayer(view)` | Opens the Consentmanager consent layer settings page via `forceOpen(true)`. The returned promise resolves when the user dismisses it. |
| `getRequiredPurposes()` | Returns the list of purpose identifiers extracted from the Consentmanager user status. |
| `getNumberOfVendors()` | Returns the vendor count from the Consentmanager user status. |
| `waitForInit()` | Resolves immediately (Consentmanager initialization is handled before adapter creation). |

## License

MIT
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require('../../babel.config');
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
// Jest setup file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"preset": "react-native",
"setupFilesAfterEnv": ["./jest-setup.ts"],
"transform": {
"^.+\\.(js|ts|tsx)$": "babel-jest"
},
"modulePathIgnorePatterns": [
"./lib/",
"./ios/",
"./android/"
],
"moduleNameMapper": {
"^cm-sdk-react-native-v3$": "<rootDir>/src/__mocks__/cm-sdk-react-native-v3.ts"
}
}
86 changes: 86 additions & 0 deletions packages/react-native-contentpass-cmp-consentmanager/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
{
"name": "@contentpass/react-native-contentpass-cmp-consentmanager",
"version": "0.1.0",
"description": "Contentpass Consentmanager CMP adapter",
"source": "./src/index.ts",
"main": "./lib/commonjs/index.js",
"module": "./lib/module/index.js",
"exports": {
".": {
"import": {
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
"default": "./lib/module/index.js"
},
"require": {
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
"default": "./lib/commonjs/index.js"
}
}
},
"types": "./lib/typescript/react-native-contentpass-cmp-consentmanager/src/index.d.ts",
"files": [
"lib",
"!**/*.test.ts",
"!**/*.test.tsx",
"!**/__tests__",
"!**/__fixtures__",
"!**/__mocks__",
"!**/.*"
],
"scripts": {
"test": "jest --coverage",
"typecheck": "tsc",
"prepare": "bob build"
},
"keywords": [
"contentpass",
"react-native",
"cmp",
"consentmanager"
],
"repository": {
"type": "git",
"url": "git+https://github.com/contentpass/react-native-contentpass.git"
},
"author": "contentpass <dev@contentpass.de> (https://github.com/contentpass)",
"license": "MIT",
"bugs": {
"url": "https://github.com/contentpass/react-native-contentpass/issues"
},
"homepage": "https://github.com/contentpass/react-native-contentpass#readme",
"publishConfig": {
"registry": "https://registry.npmjs.org/",
"access": "public"
},
"peerDependencies": {
"@contentpass/react-native-contentpass": "*",
"cm-sdk-react-native-v3": "*"
},
"devDependencies": {
"@contentpass/react-native-contentpass": "workspace:*",
"@react-native-community/cli": "20.1.1",
"@react-native/babel-preset": "0.83.1",
"@types/jest": "^30.0.0",
"@types/react": "^19.2.10",
"jest": "^30.2.0",
"react": "19.2.4",
"react-native": "0.83.1",
"react-native-builder-bob": "^0.40.17",
"typescript": "^5.9.3"
},
"react-native-builder-bob": {
"source": "src",
"exclude": "**/{__tests__,__fixtures__,__mocks__}/**",
"output": "lib",
"targets": [
"commonjs",
"module",
[
"typescript",
{
"project": "tsconfig.build.json"
}
]
]
}
}
Loading
Loading