naquilini
Repositories Projects Packages Public Activity Starred Repositories

@tecnavia/react-native-osano-web (1.2.0)

Published 2024-08-06 14:31:28 +00:00 by naquilini

Installation

@tecnavia:registry=
npm install @tecnavia/react-native-osano-web@1.2.0
"@tecnavia/react-native-osano-web": "1.2.0"

About this package

react-native-osano-web

Getting started like library

$ npm install git+https://ussvc01.newsmemory.com:3000/tecnavia/react-native-osano-web --save

Getting Started standalone

Before integrating the react-native-osano-web package into your project, ensure you have the correct environment setup:

  1. Node.js and npm: This package requires npm version 16. You can check your npm version by running npm --version in your terminal. If you need to switch versions, consider using a version manager like nvm. The required version can also be found in the .nvmrc file at the root of the project.

  2. Yarn Package Manager: Install Yarn globally using npm by running:

npm install -g yarn
  1. Project Setup: Once Yarn is installed, navigate to the root of your project and run:
yarn

This will install all dependencies specified in your project's package.json file.

  1. Example Project: To run the example project included with the react-native-osano-web package:

    a. Navigate to the example directory:

    cd example

    b. Install dependencies:

    yarn

    c. Start the example project:

    yarn start

    d. To run the example app on Android or iOS, use:

    yarn android

    or

    yarn ios

    These commands will build and run the example app on the respective platform emulator or connected device.

Following these steps will set up your environment for developing with the react-native-osano-web package and running the example project.

Usage

see example App.js

Osano Container is a provider that display osano cmp over children Display it when has the value, you could set value throught Osano.update

Description

  • OsanoContainer: A component that renders the Osano CMP UI over its children. It should encapsulate the part of your app where you need to manage consent.
  • Osano.update: A method to configure the Osano CMP with your specific customerId, projectId, and siteDomain. These values are essential for the CMP to function correctly and should be obtained from your Osano account.

Additional Methods

The integration also provides additional methods to further manage consent and compliance within your application:

  • askUspData: This method returns an object containing the user's consent information related to the U.S. Privacy (USP) framework. It can be used to retrieve the current state of a user's consent under USP regulations. For more details on the USP API, refer to the US Privacy API documentation.

  • askTcData: Similar to askUspData, this method returns an object containing the user's consent information, but for the Transparency & Consent Framework (TCF). This is useful for applications operating within jurisdictions that adhere to the TCF guidelines. For more information on the TCF API, see the TCF CMP API v2 documentation.

  • show: This method triggers the Osano CMP UI to be displayed, allowing the user to change their consent preferences. It can be invoked at any point in the application where you might need to prompt the user to review or alter their consent decisions.

Example Usage

// Retrieve USP consent data
const uspData = Osano.askUspData().then((uspData) => console.log(uspData));

// Retrieve TC consent data
Osano.askTcData().then((tcData) => console.log(tcData));

// Show the Osano consent UI to allow the user to change their consent preferences
Osano.show();

Handling Consent

The onConsent callback in the OsanoContainer component is triggered when the user makes a consent decision. Use this callback to handle the consent result in your application, such as logging consent or adjusting application behavior based on user consent.

Conclusion

Integrating Osano into your React Native application helps ensure compliance with privacy regulations by managing user consent for data collection and processing. Follow the steps outlined above to add Osano CMP to your application.

Dependencies

Development Dependencies

ID Version
@evilmartians/lefthook ^1.2.2
@react-native-async-storage/async-storage ^1.17.9
@react-native-community/eslint-config ^3.0.2
@react-native-community/netinfo ^5.3.3
@release-it/conventional-changelog ^5.0.0
@tecnavia/react-native-event-listeners 1.1.0
@tecnavia/react-native-utils 1.3.0
@types/jest ^28.1.2
@types/react ~17.0.21
@types/react-native 0.70.0
eslint ^8.4.1
eslint-config-prettier ^8.5.0
eslint-plugin-prettier ^4.0.0
jest ^28.1.1
prettier ^2.0.5
react 17.0.2
react-native 0.67.5
react-native-builder-bob ^0.20.0
react-native-safe-area-context ^3.3.2
react-native-webview ^11.17.2
release-it ^15.0.0
typescript ^4.5.2

Peer Dependencies

ID Version
@react-native-async-storage/async-storage *
@react-native-community/netinfo *
@tecnavia/react-native-event-listeners *
@tecnavia/react-native-utils *
react *
react-native *
react-native-safe-area-context *
react-native-webview *

Keywords

react-native
Details
npm
2024-08-06 14:31:28 +00:00
6
amauri
MIT
latest
24 KiB
Assets (1)
react-native-osano-web-1.2.0.tgz 24 KiB
Versions (1) View all
1.2.0 2024-08-06