Skip to content

Commit b22fa16

Browse files
chore: add README
1 parent 25833af commit b22fa16

File tree

2 files changed

+104
-12
lines changed

2 files changed

+104
-12
lines changed

README.md

Lines changed: 103 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @sourcepoint/react-native-cmp
22

3-
The official react native bridge to the native Sourcepoint SDKs
3+
The official React Native package for Sourcepoint
44

55
## Installation
66

@@ -10,22 +10,115 @@ npm install @sourcepoint/react-native-cmp
1010

1111
## Usage
1212

13-
```js
14-
import { multiply } from '@sourcepoint/react-native-cmp';
13+
### Overview
14+
In a nutshell, in order to use the `SPConsentManager` you'll need:
15+
1. Instantiate and call build with your configuration
16+
2. Set up the callbacks in the instance of `SPConsentManager`
17+
3. Call `loadMessages`. This will initiate the message, contact SP's servers, and it may or may not display a message, depending on your campaign scenario (configured in Sourcepoin't Dashboard).
18+
4. Retrieve user data with `getUserData`.
1519

16-
// ...
20+
Let's review each of the steps above in more detail.
1721

18-
const result = await multiply(3, 7);
22+
### Instantiate and call build with your configuration
23+
In your app, you can setup the SPConsent manager in a external file or on your App. In this example we use `useRef`
24+
to keep a reference of the `SPConsentManager`. It's important to notice we wrap the initialisation of `SPConsentManager` in a `useEffect` and call `consentManager.current?.dispose()` to avoid memory leaks.
25+
```ts
26+
const consentManager = useRef<SPConsentManager | null>();
27+
28+
useEffect(() => {
29+
consentManager.current = new SPConsentManager();
30+
consentManager.current?.build(
31+
config.accountId,
32+
config.propertyId,
33+
config.propertyName,
34+
config.campaigns
35+
);
36+
37+
return () => {
38+
consentManager.current?.dispose();
39+
};
40+
}
1941
```
2042
21-
## Contributing
43+
### Set up the callbacks in the instance of `SPConsentManager`
44+
`SPConsentManager` communicates with your app through a series of callbacks.
45+
46+
* `onSPUIReady(callback: () => {})`
47+
This is called if the server determined a message should be displayed. The native SDKs will take care of the showing the message.
48+
* `onAction(callback: (action: string) => {});`
49+
Called when the user takes a action (e.g. accept all) within the consent message. `action: string` is going to be replaced with an enum.
50+
* `onSPUIFinished(callback: () => {})`
51+
Called when the native SDKs is done removing the consent UI from the foreground.
52+
* `onFinished(callback: () => {})`
53+
Called when all UI and network processes are finished. User consent is stored on the local storage of each platform (`UserDefaults` for iOS and `SharedPrefs` for Android). And it's safe to retrieve consent data with `getUserData`
54+
* `onError(callback: (description: string) => {})`
55+
Called if something go wrong.
56+
57+
### Call `loadMessages`
58+
After instantiating and setting up `SPConsentManager`, configuring its callbacks, it's time to call `loadMessages`. This can be done at any stage of your app's lifecycle. Ideally you will want to call it as early as possible, in order to have consent for your vendors.
59+
60+
### Retrieve user data with `getUserData`
61+
`getUserData` returns a `Promise<SPUserData>`. You can call this function at any point in your app's lifecycle, but consent may or may not yet be ready. The safest place to call it is inside the callback `onSPFinished`.
62+
63+
## Full Example
64+
```jsx
65+
import React, { useState, useEffect, useRef } from 'react';
66+
import { View, Text, SafeAreaView } from 'react-native';
67+
68+
import { SPConsentManager, SPCampaignEnvironment } from '@sourcepoint/react-native-cmp';
69+
70+
export default function App() {
71+
const [userData, setUserData] = useState<SPUserData>({});
72+
const consentManager = useRef<SPConsentManager | null>();
2273

23-
See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
74+
useEffect(() => {
75+
// setup
76+
consentManager.current = new SPConsentManager();
77+
consentManager.current?.build(
78+
22,
79+
16893,
80+
"mobile.multicampaign.demo",
81+
{
82+
gdpr: {},
83+
// usnat: {} // uncomment this if you have a usnat campaign set up
84+
}
85+
);
86+
87+
// configure callbacks
88+
consentManager.current?.onSPUIReady(() => {
89+
console.log("Consent UI is ready to be displayed")
90+
});
91+
consentManager.current?.onSPUIFinished(() => {
92+
console.log("Consent UI is finished")
93+
});
94+
consentManager.current?.onFinished(() => {
95+
consentManager.current?.getUserData().then(setUserData);
96+
});
97+
consentManager.current?.onAction((action) => {
98+
console.log(`User took action ${action}`)
99+
});
100+
consentManager.current?.onError(console.error);
101+
102+
consentManager.current?.loadMessage();
103+
104+
return () => {
105+
consentManager.current?.dispose();
106+
};
107+
}, []);
108+
return (
109+
<SafeAreaView>
110+
<View>
111+
<Text>{JSON.stringify(userData, null, 2)}</Text>
112+
</View>
113+
</SafeAreaView>
114+
)
115+
```
116+
117+
### Complete Example
118+
119+
For a complete app example, check the `/example` folder.
24120
25121
## License
26122
27123
MIT
28124
29-
---
30-
31-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

src/types.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,11 @@ export interface Spec extends TurboModule {
9999
loadGDPRPrivacyManager(pmId: string): void;
100100
loadUSNatPrivacyManager(pmId: string): void;
101101

102-
onFinished(callback: () => void): void;
103-
104102
// TODO: change action from string to enum
105103
onAction(callback: (action: string) => void): void;
106104
onSPUIReady(callback: () => void): void;
107105
onSPUIFinished(callback: () => void): void;
106+
onFinished(callback: () => void): void;
108107
onError(callback: (description: string) => void): void;
109108

110109
dispose(): void;

0 commit comments

Comments
 (0)