diff --git a/.changeset/honest-ways-wave.md b/.changeset/honest-ways-wave.md new file mode 100644 index 00000000..7f86eae8 --- /dev/null +++ b/.changeset/honest-ways-wave.md @@ -0,0 +1,7 @@ +--- +"@consent-manager/interface-default": patch +"@consent-manager/core": patch +"docs": patch +--- + +Replace React.ComponentType with React.FC as things changed with React 18 and TS 5.1 diff --git a/packages/core/src/components/ConsentManagerForm.tsx b/packages/core/src/components/ConsentManagerForm.tsx index 05ffb6f1..054bd277 100644 --- a/packages/core/src/components/ConsentManagerForm.tsx +++ b/packages/core/src/components/ConsentManagerForm.tsx @@ -8,7 +8,7 @@ import { } from './DecisionsForm' export interface ConsentManagerFormProps { - formComponent?: React.ComponentType + formComponent?: React.FC [key: string]: unknown } diff --git a/packages/core/src/config.ts b/packages/core/src/config.ts index f631051c..8266e933 100644 --- a/packages/core/src/config.ts +++ b/packages/core/src/config.ts @@ -20,9 +20,9 @@ export interface IntegrationConfig { color?: string contrastColor?: string privacyPolicyUrl?: string - Icon: React.ComponentType + Icon: React.FC pageViewEventHandler?: PageViewEventTrigger - WrapperComponent?: React.ComponentType + WrapperComponent?: React.FC options?: IntegrationConfigOptions enabledByDefault?: boolean } diff --git a/packages/core/src/context.ts b/packages/core/src/context.ts index 5b615f28..d429ef40 100644 --- a/packages/core/src/context.ts +++ b/packages/core/src/context.ts @@ -7,7 +7,7 @@ import { import { ConsentManagerStore } from './storage' interface ConsentManagerContextValue { - fallbackComponent: React.ComponentType + fallbackComponent: React.FC config: ConsentManagerConfig store: ConsentManagerStore } diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index e79e94a3..6ae5513a 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -15,7 +15,7 @@ import { FallbackComponent } from './components/FallbackComponent' export interface ConsentManagerProps { config: ConsentManagerConfig - fallbackComponent?: React.ComponentType + fallbackComponent?: React.FC store: ConsentManagerStore children: React.ReactNode } @@ -57,7 +57,7 @@ export function useDecision( ] } -export function useFallbackComponent(): React.ComponentType { +export function useFallbackComponent(): React.FC { const { fallbackComponent: FallbackComponent } = useContext( ConsentManagerContext ) diff --git a/packages/docs/babel.config.js b/packages/docs/babel.config.js index e00595da..67526481 100644 --- a/packages/docs/babel.config.js +++ b/packages/docs/babel.config.js @@ -1,3 +1,3 @@ module.exports = { presets: [require.resolve('@docusaurus/core/lib/babel/preset')], -}; +} diff --git a/packages/docs/docs/about.md b/packages/docs/docs/about.md index d830bfac..203161d2 100644 --- a/packages/docs/docs/about.md +++ b/packages/docs/docs/about.md @@ -1,7 +1,7 @@ --- id: about title: What is Consent Manager? -slug: "/" +slug: '/' --- import { YoutubeVideo } from '../src/components/youtube-video' @@ -44,4 +44,4 @@ We specialize in React because it's our strength and passion. But we're excited Ready to make your website GDPR-compliant? Our Quick Start guide is your first step towards a safer, privacy-focused online presence. In just a few minutes, you can set the foundation for a more secure and respectful user experience. Let's get started! -[Start your journey with Consent Manager](./quick-start.md) \ No newline at end of file +[Start your journey with Consent Manager](./quick-start.md) diff --git a/packages/docs/docs/configuration.md b/packages/docs/docs/configuration.md index adbee6d0..0a70c2d5 100644 --- a/packages/docs/docs/configuration.md +++ b/packages/docs/docs/configuration.md @@ -43,9 +43,9 @@ Each integration used within the `ConsentManagerConfig` must conform to the foll | `color` | `string` | Optional. The primary color associated with the integration. | | `contrastColor` | `string` | Optional. A contrasting color for better visibility. | | `privacyPolicyUrl` | `string` | URL to the privacy policy of the integration. | -| `Icon` | `React.ComponentType` | A React component for the integration's icon. | +| `Icon` | `React.FC` | A React component for the integration's icon. | | `pageViewEventHandler` | `PageViewEventTrigger` | Optional. Handler for tracking page views. | -| `WrapperComponent` | `React.ComponentType` | Optional. A wrapper component for the integration. | +| `WrapperComponent` | `React.FC` | Optional. A wrapper component for the integration. | | `options` | `IntegrationConfigOptions` | Optional. Additional configuration options for the integration. | | `enabledByDefault` | `boolean` | Optional. Indicates if the integration is enabled by default. | @@ -65,7 +65,7 @@ const consentManagerConfig = { siteID: 'YOUR_SITE_ID', }), yourCustomIntegration({ - tracking_key: 'VERY#SECURE#KEY' + tracking_key: 'VERY#SECURE#KEY', }), ], onChangeDecision: (lastDecisionsState, nextDecisionState) => { diff --git a/packages/docs/docs/core/consent-manager-form.md b/packages/docs/docs/core/consent-manager-form.md index 1511c7ec..0e2dd7fc 100644 --- a/packages/docs/docs/core/consent-manager-form.md +++ b/packages/docs/docs/core/consent-manager-form.md @@ -1,23 +1,26 @@ --- title: --- + # `` `ConsentManagerForm` is a React component designed to provide a basic, unstyled form enabling users to control their consent choices for different integrations. This component is particularly useful as a reference or starting point for integrating a custom consent form. It facilitates the enabling or disabling of integrations based on user preferences. For a pre-styled version, consider exploring our default interface. ## Props -| Prop | Type | Description | -|----------------|-----------------------------|--------------------------------------------------------------| -| `formComponent`| `React.ComponentType` | Optional. A custom form component to override the default. | -| `...props` | `unknown` | Any additional props are passed down to the form component. | + +| Prop | Type | Description | +| --------------- | ------------------------------ | ----------------------------------------------------------- | +| `formComponent` | `React.FC` | Optional. A custom form component to override the default. | +| `...props` | `unknown` | Any additional props are passed down to the form component. | ## Example Usage + ```jsx import { ConsentManagerForm } from '@consent-manager/core'; const MyConsentForm = () => { // Custom form component (optional) - const CustomFormComponent = ...; + const CustomFormComponent = ...; return ( diff --git a/packages/docs/docs/core/consent-manager.md b/packages/docs/docs/core/consent-manager.md index 5938fab3..c67cc163 100644 --- a/packages/docs/docs/core/consent-manager.md +++ b/packages/docs/docs/core/consent-manager.md @@ -14,7 +14,7 @@ The actual layout is provided by the [Form Component](./consent-manager-form.md) | ------------------- | ----------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | | `config` | [`ConsentManagerConfig`](../configuration.md) | Configuration object for Consent Manager. | | `store` | [`ConsentManagerStore`](https://github.com/hashbite/consent-manager/blob/main/packages/core/src/storage.ts) | Storage mechanism for consent decisions. | -| `fallbackComponent` | `React.ComponentType` | Optional. Custom fallback component for unconsented integrations. | +| `fallbackComponent` | `React.FC` | Optional. Custom fallback component for unconsented integrations. | | `children` | `React.ReactNode` | The application's components. | ## Example Usage diff --git a/packages/docs/docs/core/hooks.md b/packages/docs/docs/core/hooks.md index 1555a159..a8bfb367 100644 --- a/packages/docs/docs/core/hooks.md +++ b/packages/docs/docs/core/hooks.md @@ -23,7 +23,6 @@ The Consent Manager Core provides a suite of React hooks designed to manage and - [usePageViewEventTrigger](#usepagevieweventtrigger) - [Code and Example](#code-and-example-7) - ## Handling User Consent Decisions Our suite of hooks offers comprehensive solutions for interacting with and managing users' consent preferences. @@ -33,6 +32,7 @@ Our suite of hooks offers comprehensive solutions for interacting with and manag `useDecision` is used to manage the consent decision for a specific integration. It allows you to retrieve and set the consent state of a particular integration. #### Code and Example + ```javascript export function useDecision( id: IntegrationId @@ -42,36 +42,39 @@ export function useDecision( ``` **Example Usage:** + ```jsx -import React from 'react'; -import { useDecision } from '@consent-manager/core'; +import React from 'react' +import { useDecision } from '@consent-manager/core' const IntegrationComponent = ({ integrationId }) => { - const [consentGiven, setConsentGiven] = useDecision(integrationId); + const [consentGiven, setConsentGiven] = useDecision(integrationId) const handleConsentChange = () => { - setConsentGiven(!consentGiven); - }; + setConsentGiven(!consentGiven) + } return (
-

Consent for {integrationId}: {consentGiven ? 'Granted' : 'Denied'}

+

+ Consent for {integrationId}: {consentGiven ? 'Granted' : 'Denied'} +

- ); -}; + ) +} ``` In this example, `useDecision` efficiently manages user consent for a specific integration. It offers both the current consent state and a function to update it, ideal for components that display consent status or allow users to change their consent. This hook is also integral to the functionality of the [`` component](./privacy-shield.md). - ### useDecisions Manages the state of consent decisions for all integrations, providing a global view of user consents. #### Code and Example + ```javascript export function useDecisions(): [ConsentManagerDecisions, Dispatch>] { // ... implementation ... @@ -79,12 +82,13 @@ export function useDecisions(): [ConsentManagerDecisions, Dispatch { - const [decisions] = useDecisions(); + const [decisions] = useDecisions() return (
    @@ -94,8 +98,8 @@ const ConsentOverview = () => { ))}
- ); -}; + ) +} ``` In this example, `useDecisions` is used to access all consent decisions across various integrations, allowing for a comprehensive overview. @@ -109,6 +113,7 @@ These specialized hooks facilitate access to the configuration from all integrat Retrieves the configuration for a specific integration. #### Code and Example + ```javascript export function useIntegration(id: IntegrationId): IntegrationConfig | undefined { // ... implementation ... @@ -116,22 +121,23 @@ export function useIntegration(id: IntegrationId): IntegrationConfig | undefined ``` **Example Usage:** + ```jsx -import React from 'react'; -import { useIntegration } from '@consent-manager/core'; +import React from 'react' +import { useIntegration } from '@consent-manager/core' const IntegrationDetails = ({ integrationId }) => { - const integrationConfig = useIntegration(integrationId); + const integrationConfig = useIntegration(integrationId) - if (!integrationConfig) return

Integration not found.

; + if (!integrationConfig) return

Integration not found.

return (

{integrationConfig.title}

{integrationConfig.description}

- ); -}; + ) +} ``` This example shows how `useIntegration` can be used to retrieve and display the configuration details of a specific integration. @@ -141,6 +147,7 @@ This example shows how `useIntegration` can be used to retrieve and display the Retrieves all integration configurations from the context. #### Code and Example + ```javascript export function useIntegrations(): IntegrationConfig[] { // ... implementation ... @@ -148,12 +155,13 @@ export function useIntegrations(): IntegrationConfig[] { ``` **Example Usage:** + ```jsx -import React from 'react'; -import { useIntegrations } from '@consent-manager/core'; +import React from 'react' +import { useIntegrations } from '@consent-manager/core' const AllIntegrations = () => { - const integrations = useIntegrations(); + const integrations = useIntegrations() return (
    @@ -161,8 +169,8 @@ const AllIntegrations = () => {
  • {integration.title}
    • ))}
- ); -}; + ) +} ``` `useIntegrations` is utilized for accessing the configurations of all available integrations, aiding in rendering a complete list or performing global operations. @@ -172,6 +180,7 @@ const AllIntegrations = () => { Same as useIntegrations, but provides a list of **enabled** integrations based on user consent. #### Code and Example + ```javascript export function useEnabledIntegrations(): [IntegrationId[], Dispatch>] { // ... implementation ... @@ -179,12 +188,13 @@ export function useEnabledIntegrations(): [IntegrationId[], Dispatch { - const [enabledIntegrations] = useEnabledIntegrations(); + const [enabledIntegrations] = useEnabledIntegrations() return (
    @@ -192,8 +202,8 @@ const EnabledIntegrationsList = () => {
  • {id}
    • ))}
- ); -}; + ) +} ``` `useEnabledIntegrations` offers an easy way to list all integrations that have been consented to by the user. @@ -205,6 +215,7 @@ const EnabledIntegrationsList = () => { `useConsentFormVisible` manages the visibility of the consent form, determining whether it should be displayed based on pending decisions. #### Code and Example + ```javascript export function useConsentFormVisible(): boolean { // ... implementation ... @@ -212,15 +223,16 @@ export function useConsentFormVisible(): boolean { ``` **Example Usage:** + ```jsx -import React from 'react'; -import { useConsentFormVisible } from '@consent-manager/core'; +import React from 'react' +import { useConsentFormVisible } from '@consent-manager/core' const ConsentForm = () => { - const isFormVisible = useConsentFormVisible(); + const isFormVisible = useConsentFormVisible() - return isFormVisible ?
Your Consent Form
: null; -}; + return isFormVisible ?
Your Consent Form
: null +} ``` This hook is particularly useful for conditionally rendering the consent form based on the user's current consent decisions. @@ -230,22 +242,24 @@ This hook is particularly useful for conditionally rendering the consent form ba `useFallbackComponent` retrieves the fallback component defined in the Consent Manager's context, typically used when an integration is disabled or awaiting consent. #### Code and Example + ```javascript -export function useFallbackComponent(): React.ComponentType { +export function useFallbackComponent(): React.FC { // ... implementation ... } ``` **Example Usage:** + ```jsx -import React from 'react'; -import { useFallbackComponent } from '@consent-manager/core'; +import React from 'react' +import { useFallbackComponent } from '@consent-manager/core' const MyComponent = () => { - const FallbackComponent = useFallbackComponent(); + const FallbackComponent = useFallbackComponent() - return ; -}; + return +} ``` In this example, `useFallbackComponent` helps in obtaining and rendering a specific fallback UI when an integration is not enabled. @@ -255,6 +269,7 @@ In this example, `useFallbackComponent` helps in obtaining and rendering a speci `usePageViewEventTrigger` provides a function to trigger page view events for a specific integration, often used for analytics and tracking purposes. #### Code and Example + ```javascript export function usePageViewEventTrigger( id: IntegrationId @@ -264,19 +279,20 @@ export function usePageViewEventTrigger( ``` **Example Usage:** + ```jsx -import React, { useEffect } from 'react'; -import { usePageViewEventTrigger } from '@consent-manager/core'; +import React, { useEffect } from 'react' +import { usePageViewEventTrigger } from '@consent-manager/core' const PageComponent = ({ integrationId }) => { - const triggerPageViewEvent = usePageViewEventTrigger(integrationId); + const triggerPageViewEvent = usePageViewEventTrigger(integrationId) useEffect(() => { - triggerPageViewEvent(window.location); - }, [triggerPageViewEvent]); + triggerPageViewEvent(window.location) + }, [triggerPageViewEvent]) - return
Page Content
; -}; + return
Page Content
+} ``` -This hook is ideal for integrating with analytics tools, allowing you to track page views only when consent is granted for the specified integration. \ No newline at end of file +This hook is ideal for integrating with analytics tools, allowing you to track page views only when consent is granted for the specified integration. diff --git a/packages/docs/docs/guides/client-side-routing.md b/packages/docs/docs/guides/client-side-routing.md index 7f0f01f8..b3c49b7e 100644 --- a/packages/docs/docs/guides/client-side-routing.md +++ b/packages/docs/docs/guides/client-side-routing.md @@ -7,6 +7,7 @@ Your adjusted guide for client-side routing and tracking in SPAs is well-structu ### Enhanced Guide for Client-Side Routing and Tracking in SPAs #### Implementing Enhanced Routing Event Listener + When using client-side routing in your SPA, it's important to track both the new and previous locations to understand user navigation paths accurately. Here's how you can implement this with the Matomo integration: ```javascript @@ -52,8 +53,9 @@ export default App; ``` #### Notes: + - The `useState` hook is used to keep track of the previous location. - The `useEffect` hook sets up a listener on route changes and updates the tracking information accordingly. - This approach provides more detailed analytics on how users navigate through your SPA. -This enhanced guide ensures that your SPA's client-side routing and tracking accurately reflect user interactions. \ No newline at end of file +This enhanced guide ensures that your SPA's client-side routing and tracking accurately reflect user interactions. diff --git a/packages/docs/docs/guides/create-custom-integration.md b/packages/docs/docs/guides/create-custom-integration.md index 9e0aa628..3a638a91 100644 --- a/packages/docs/docs/guides/create-custom-integration.md +++ b/packages/docs/docs/guides/create-custom-integration.md @@ -92,22 +92,22 @@ export function yourServiceIntegration(options: { apiKey: string }): Integration Incorporate your custom integration into the Consent Manager configuration of your application. Here's an example: ```javascript -import { ConsentManager } from '@consent-manager/core'; -import { yourServiceIntegration } from './your-service-integration'; +import { ConsentManager } from '@consent-manager/core' +import { yourServiceIntegration } from './your-service-integration' const App = () => { const config = { integrations: [ - yourServiceIntegration({ apiKey: 'your-api-key' }) // Pass custom options here + yourServiceIntegration({ apiKey: 'your-api-key' }), // Pass custom options here ], - }; + } return ( {/* Your application components */} - ); -}; + ) +} ``` ## Additional Notes @@ -115,4 +115,4 @@ const App = () => { - Ensure thorough testing, particularly in respecting user consent choices. - Be mindful of performance, especially when loading external scripts or services. -This guide gives you a flexible framework to integrate any third-party service with Consent Manager, ensuring your application is compliant and respectful of user consent. \ No newline at end of file +This guide gives you a flexible framework to integrate any third-party service with Consent Manager, ensuring your application is compliant and respectful of user consent. diff --git a/packages/docs/docs/guides/create-custom-interface.md b/packages/docs/docs/guides/create-custom-interface.md index e96499ac..40f862ca 100644 --- a/packages/docs/docs/guides/create-custom-interface.md +++ b/packages/docs/docs/guides/create-custom-interface.md @@ -11,8 +11,8 @@ This guide outlines the initial steps to integrate your custom user interface wi First, wrap your application with `ConsentManager`, using your custom fallback component to match your design. For reference, see the [default implementation](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx). ```tsx -import { ConsentManager, ConsentManagerForm } from '@consent-manager/core'; -import { ConsentManagerCustomFormComponent } from './consent-manager-custom-form'; +import { ConsentManager, ConsentManagerForm } from '@consent-manager/core' +import { ConsentManagerCustomFormComponent } from './consent-manager-custom-form' export const ConsentManagerCustomInterface = ({ children, ...props }) => { return ( @@ -30,8 +30,8 @@ export const ConsentManagerCustomInterface = ({ children, ...props }) => { {...props} /> - ); -}; + ) +} ``` ## Step 2: Create Your Own Form Component @@ -42,35 +42,35 @@ Your custom form component will receive the following properties: ### `DecisionsFormProps` Structure -| Prop | Type | Description | -|------------------|---------------------------------|-----------------------------------------------------| -| `integrations` | `IntegrationConfig[]` | Array of integration configurations. | -| `initialValues` | `DecisionsFormState` | Initial state indicating enabled integrations. | -| `onSubmit` | `(value: DecisionsFormState) => void` | Callback function to handle form submission. | +| Prop | Type | Description | +| --------------- | ------------------------------------- | ---------------------------------------------- | +| `integrations` | `IntegrationConfig[]` | Array of integration configurations. | +| `initialValues` | `DecisionsFormState` | Initial state indicating enabled integrations. | +| `onSubmit` | `(value: DecisionsFormState) => void` | Callback function to handle form submission. | ### `IntegrationConfig` Structure -| Prop | Type | Description | -|------------------------|-------------------------------------------|-------------------------------------------------------------| -| `id` | `string` | Unique identifier for the integration. | -| `title` | `string` | Title of the integration. | -| `description` | `string` | Description of the integration. | -| `category` | `string` | Category of the integration. | -| `color`, `contrastColor`| `string` | Optional colors for the integration icon. | -| `privacyPolicyUrl` | `string` | URL to the privacy policy of the integration. | -| `Icon` | `React.ComponentType` | Icon component for the integration. | -| `pageViewEventHandler` | `PageViewEventTrigger` | Optional event handler for tracking page views. | -| `WrapperComponent` | `React.ComponentType` | Optional wrapper component for the integration. | -| `options` | `IntegrationConfigOptions` | Additional options specific to the integration. | -| `enabledByDefault` | `boolean` | Indicates if the integration is enabled by default. | +| Prop | Type | Description | +| ------------------------ | ----------------------------------------- | --------------------------------------------------- | +| `id` | `string` | Unique identifier for the integration. | +| `title` | `string` | Title of the integration. | +| `description` | `string` | Description of the integration. | +| `category` | `string` | Category of the integration. | +| `color`, `contrastColor` | `string` | Optional colors for the integration icon. | +| `privacyPolicyUrl` | `string` | URL to the privacy policy of the integration. | +| `Icon` | `React.FC` | Icon component for the integration. | +| `pageViewEventHandler` | `PageViewEventTrigger` | Optional event handler for tracking page views. | +| `WrapperComponent` | `React.FC` | Optional wrapper component for the integration. | +| `options` | `IntegrationConfigOptions` | Additional options specific to the integration. | +| `enabledByDefault` | `boolean` | Indicates if the integration is enabled by default. | Certainly! Here's the table detailing the structure of `DecisionsFormState`: ### `DecisionsFormState` Structure -| Property | Type | Description | -|----------|------------------|-------------------------------------------------------| -| `enabled`| `IntegrationId[]`| An array of `IntegrationId`s representing the integrations that are currently enabled. | +| Property | Type | Description | +| --------- | ----------------- | -------------------------------------------------------------------------------------- | +| `enabled` | `IntegrationId[]` | An array of `IntegrationId`s representing the integrations that are currently enabled. | Each `IntegrationId` in the `enabled` array corresponds to a unique identifier for an integration that the user has consented to. This state is used to manage and reflect the user's current consent choices in your custom form component. @@ -112,4 +112,4 @@ export const ConsentManagerCustomFormComponent: React.FC = ({ ); }; -``` \ No newline at end of file +``` diff --git a/packages/docs/docs/guides/i18n.md b/packages/docs/docs/guides/i18n.md index 10a4599b..fd5de1ff 100644 --- a/packages/docs/docs/guides/i18n.md +++ b/packages/docs/docs/guides/i18n.md @@ -1,5 +1,5 @@ # Translation and i18n Support -Consent Manager is designed to work seamlessly with widely-used React translation libraries such as react-i18n, react-intl, LinguiJS, and more. +Consent Manager is designed to work seamlessly with widely-used React translation libraries such as react-i18n, react-intl, LinguiJS, and more. -If you opt to create your own interface, you have complete flexibility in managing translations and internationalization. However, for those utilizing our default interface, comprehensive i18n support is already integrated. For detailed guidance on implementing i18n with the default interface, please refer to our [i18n guide for the default interface](../interface-default/i18n.md). \ No newline at end of file +If you opt to create your own interface, you have complete flexibility in managing translations and internationalization. However, for those utilizing our default interface, comprehensive i18n support is already integrated. For detailed guidance on implementing i18n with the default interface, please refer to our [i18n guide for the default interface](../interface-default/i18n.md). diff --git a/packages/docs/docs/integrations/algolia.md b/packages/docs/docs/integrations/algolia.md index b79d1881..aec00eb8 100644 --- a/packages/docs/docs/integrations/algolia.md +++ b/packages/docs/docs/integrations/algolia.md @@ -1,7 +1,7 @@ --- id: algolia title: Algolia Integration -slug: "/integrations/algolia" +slug: '/integrations/algolia' --- - Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-algolia diff --git a/packages/docs/docs/integrations/google-analytics.md b/packages/docs/docs/integrations/google-analytics.md index d8497c51..57d9285c 100644 --- a/packages/docs/docs/integrations/google-analytics.md +++ b/packages/docs/docs/integrations/google-analytics.md @@ -1,7 +1,7 @@ --- id: google-analytics title: Google Analytics Integration -slug: "/integrations/google-analytics" +slug: '/integrations/google-analytics' --- - Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-google-analytics diff --git a/packages/docs/docs/integrations/google-tag-manager.md b/packages/docs/docs/integrations/google-tag-manager.md index de49a6c3..52f3c946 100644 --- a/packages/docs/docs/integrations/google-tag-manager.md +++ b/packages/docs/docs/integrations/google-tag-manager.md @@ -1,7 +1,7 @@ --- id: google-tag-manager title: Google Tag Manager Integration -slug: "/integrations/google-tag-manager" +slug: '/integrations/google-tag-manager' --- - Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-google-tag-manager diff --git a/packages/docs/docs/integrations/hubspot.md b/packages/docs/docs/integrations/hubspot.md index 51e086ef..48f4d0bd 100644 --- a/packages/docs/docs/integrations/hubspot.md +++ b/packages/docs/docs/integrations/hubspot.md @@ -1,7 +1,7 @@ --- id: linkedin title: LinkedIn Integration -slug: "/integrations/linkedin" +slug: '/integrations/linkedin' --- import { linkedinIntegration } from "@consent-manager/integration-linkedin" diff --git a/packages/docs/docs/integrations/linkedin.md b/packages/docs/docs/integrations/linkedin.md index 705b6ea7..798da5c2 100644 --- a/packages/docs/docs/integrations/linkedin.md +++ b/packages/docs/docs/integrations/linkedin.md @@ -1,7 +1,7 @@ --- id: hubspot title: Hubspot Integration -slug: "/integrations/hubspot" +slug: '/integrations/hubspot' --- import { hubspotIntegration } from "@consent-manager/integration-hubspot" diff --git a/packages/docs/docs/integrations/mapbox.md b/packages/docs/docs/integrations/mapbox.md index 20c58c87..03fe6bdd 100644 --- a/packages/docs/docs/integrations/mapbox.md +++ b/packages/docs/docs/integrations/mapbox.md @@ -1,7 +1,7 @@ --- id: mapbox title: Mapbox Integration -slug: "/integrations/mapbox" +slug: '/integrations/mapbox' --- - Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-mapbox diff --git a/packages/docs/docs/integrations/matomo.md b/packages/docs/docs/integrations/matomo.md index 75c0ca94..e50744f7 100644 --- a/packages/docs/docs/integrations/matomo.md +++ b/packages/docs/docs/integrations/matomo.md @@ -1,7 +1,7 @@ --- id: matomo title: Matomo Integration -slug: "/integrations/matomo" +slug: '/integrations/matomo' --- import { matomoIntegration, matomoPrivacyAwareIntegration } from "@consent-manager/integration-matomo" diff --git a/packages/docs/docs/integrations/segment.md b/packages/docs/docs/integrations/segment.md index 6c431c4b..99463ba8 100644 --- a/packages/docs/docs/integrations/segment.md +++ b/packages/docs/docs/integrations/segment.md @@ -1,7 +1,7 @@ --- id: segment title: Segment Integration -slug: "/integrations/segment" +slug: '/integrations/segment' --- - Source code: https://github.com/hashbite/consent-manager/tree/main/packages/integration-segment diff --git a/packages/docs/docs/integrations/vimeo.md b/packages/docs/docs/integrations/vimeo.md index 5c4e09cb..690205f7 100644 --- a/packages/docs/docs/integrations/vimeo.md +++ b/packages/docs/docs/integrations/vimeo.md @@ -1,7 +1,7 @@ --- id: vimeo title: Vimeo Integration -slug: "/integrations/vimeo" +slug: '/integrations/vimeo' --- import { VimeoVideo } from '../../src/components/vimeo-video' diff --git a/packages/docs/docs/integrations/youtube.md b/packages/docs/docs/integrations/youtube.md index f5d30dbb..3bb73271 100644 --- a/packages/docs/docs/integrations/youtube.md +++ b/packages/docs/docs/integrations/youtube.md @@ -1,7 +1,7 @@ --- id: youtube title: Youtube Integration -slug: "/integrations/youtube" +slug: '/integrations/youtube' --- import { YoutubeVideo } from '../../src/components/youtube-video' diff --git a/packages/docs/docs/interface-default/i18n.md b/packages/docs/docs/interface-default/i18n.md index a0f3d780..f1c76985 100644 --- a/packages/docs/docs/interface-default/i18n.md +++ b/packages/docs/docs/interface-default/i18n.md @@ -5,23 +5,25 @@ The Consent Manager default interface supports internationalization (i18n) with This format is designed to be compatible with popular React translation frameworks, including react-i18n, react-intl, LinguiJS, among others. ## Default Messages + A set of default messages is provided, which can be overridden as needed. These include messages for general interface elements, forms, fallback components, and integration defaults. You can find the [latest default messages in the source code](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/i18n.tsx#L33). ## Example Customization + You can customize messages by passing a `messages` prop to `ConsentManagerDefaultInterface`: ```jsx -import { defaultMessages } from '@consent-manager/interface-default'; +import { defaultMessages } from '@consent-manager/interface-default' const customMessages = { ...defaultMessages, 'consent-manager.close': 'Close', // ... other customized messages -}; +} - +; {/* Rest of your application */} -``` \ No newline at end of file +``` diff --git a/packages/docs/docs/interface-default/interface.md b/packages/docs/docs/interface-default/interface.md index 8c13a26c..efb068cd 100644 --- a/packages/docs/docs/interface-default/interface.md +++ b/packages/docs/docs/interface-default/interface.md @@ -10,20 +10,20 @@ title: In addition to all the props supported by `ConsentManager`, `ConsentManagerDefaultInterface` also accepts: -| Prop | Type | Description | -| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | -| `messages` | `Messages` | Custom messages for localization and text customization. | -| `children` | `React.ReactNode` | The application's components to be rendered within the manager. | -| `config` | [`ConsentManagerConfig`](../configuration.md) | Configuration object for Consent Manager. | -| `styles`, `animationStyles` | `Styles` | Custom styling for the interface. | -| `ToggleButton`, `ToggleIcon` | [`React.ComponentType`,
`React.ComponentType`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/toggle-button.tsx) | Components for toggle buttons and icons. | -| `CloseIcon` | [`React.ComponentType`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx#L33) | Component for the close icon. | -| `Switch` | [`React.ComponentType`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/switch.tsx) | Component for the switch control. | -| `Button` | [`React.ComponentType`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx#L37) | Component for buttons. | -| `Form` | [`React.ComponentType` ](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/form.tsx) | Component for the consent form. | -| `useDefaultButtonForIntroduction` | `boolean` | Determines if the default button style is used for the introduction screen. | -| `slideDuration` | `number` | Duration of slide animations in milliseconds. | -| `noActionDelay` | `number` | Delay before any action is taken (e.g., showing the form) in milliseconds. | +| Prop | Type | Description | +| --------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | +| `messages` | `Messages` | Custom messages for localization and text customization. | +| `children` | `React.ReactNode` | The application's components to be rendered within the manager. | +| `config` | [`ConsentManagerConfig`](../configuration.md) | Configuration object for Consent Manager. | +| `styles`, `animationStyles` | `Styles` | Custom styling for the interface. | +| `ToggleButton`, `ToggleIcon` | [`React.FC`,
`React.FC`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/toggle-button.tsx) | Components for toggle buttons and icons. | +| `CloseIcon` | [`React.FC`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx#L33) | Component for the close icon. | +| `Switch` | [`React.FC`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/switch.tsx) | Component for the switch control. | +| `Button` | [`React.FC`](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.tsx#L37) | Component for buttons. | +| `Form` | [`React.FC` ](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/form.tsx) | Component for the consent form. | +| `useDefaultButtonForIntroduction` | `boolean` | Determines if the default button style is used for the introduction screen. | +| `slideDuration` | `number` | Duration of slide animations in milliseconds. | +| `noActionDelay` | `number` | Delay before any action is taken (e.g., showing the form) in milliseconds. | ## Example Usage diff --git a/packages/docs/docs/interface-default/styling.md b/packages/docs/docs/interface-default/styling.md index b6424649..a94d6212 100644 --- a/packages/docs/docs/interface-default/styling.md +++ b/packages/docs/docs/interface-default/styling.md @@ -1,11 +1,13 @@ --- title: Styling the Default Interface --- + # Styling the Consent Manager Default Interface Customizing the appearance of the default interface of Consent Manager can be achieved in various ways, allowing you to align it with your application's design and branding: ## Adjusting Colors via CSS Variables + You can modify the color scheme by tweaking CSS variables. This approach offers an easy way to align the interface with your app's color palette. ```css @@ -38,16 +40,18 @@ html[data-theme='dark'] { The default interface comes with dark mode support out of the box. Please test your page in dark mode to ensure the privacy shield fallback component looks fine. ## Replacing Components + The default interface components can be replaced with your custom components. This includes buttons, switches, and more. For a list of replaceable components, refer to the properties of the [`ConsentManagerDefaultInterface` component](./interface.md). ### Example: Custom Toggle Button + Here's an example of how you can add your own toggle button. The source for the default toggle button can be found [here](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/toggle-button.tsx): ```jsx // Import your custom toggle button component -import MyToggleButton from './MyToggleButton'; +import MyToggleButton from './MyToggleButton' - @@ -56,7 +60,9 @@ import MyToggleButton from './MyToggleButton'; ``` ## Overriding Styles + You can override the existing styles, though this method should be used cautiously. For a complete overview of the styles applied, visit the [style sheet here](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.module.css). The plugin uses consistent class names, making it possible to override styles using CSS. ## Creating Your Own Styles -For a completely custom look, consider copying and altering the existing stylesheet found [here](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.module.css). This method gives you full control over the interface's appearance. \ No newline at end of file + +For a completely custom look, consider copying and altering the existing stylesheet found [here](https://github.com/hashbite/consent-manager/blob/main/packages/interface-default/src/index.module.css). This method gives you full control over the interface's appearance. diff --git a/packages/docs/docs/new-structure.md b/packages/docs/docs/new-structure.md index 08a9294c..a1e86d32 100644 --- a/packages/docs/docs/new-structure.md +++ b/packages/docs/docs/new-structure.md @@ -1,37 +1,35 @@ -* home - introduction about the how and why +- home - introduction about the how and why -* tutorials - * DONE - quick start - default interface with one integration - * DONE - Style default interface - * DONE - i18n integration of default interface (translate default interface) - * DONE - Implement your own interface (demo/example already existing? show examples?) - * DONE - Create a custom tracking integration - * Frameworks: Basic tutorial + link to example - * NextJS - * Vite - * Parcel - * ~Create React App~ - * GatsbyJS - * DocuSaurus -* DONE - @todo sub-section that turns all of this into typescript? (or have separate typescript tutorial?) -* DONE - @todo add another guide on how to handle tracking in single page applications (or ones that use routers) -* DONE - @todo we actually need to list the config options (COMPONENETS dir????) -* @todo document helper functions in core + default interface -* @todo document hooks in core + default interface -* @todo double check that we dont have no more "cosntruction" sites -* check again if we can add typescript related help into some guides or other parts of the docs - -* integrations - * make more examples on how to track with certain integrations (for example matomo track events, page view and so on) - * make sure all config options are listed +- tutorials + - DONE - quick start - default interface with one integration + - DONE - Style default interface + - DONE - i18n integration of default interface (translate default interface) + - DONE - Implement your own interface (demo/example already existing? show examples?) + - DONE - Create a custom tracking integration + - Frameworks: Basic tutorial + link to example + - NextJS + - Vite + - Parcel + - ~Create React App~ + - GatsbyJS + - DocuSaurus +- DONE - @todo sub-section that turns all of this into typescript? (or have separate typescript tutorial?) +- DONE - @todo add another guide on how to handle tracking in single page applications (or ones that use routers) +- DONE - @todo we actually need to list the config options (COMPONENETS dir????) +- DONE - @todo document helper functions in core + default interface +- DONE - @todo document hooks in core + default interface +- @todo double check that we dont have no more "cosntruction" sites +- check again if we can add typescript related help into some guides or other parts of the docs +- integrations + - make more examples on how to track with certain integrations (for example matomo track events, page view and so on) + - make sure all config options are listed - -* other todos - * maybe its the way we store the tracking in our hooks @stanford & @maneframe why tracking stays active even when user denies (set reference of object ot null is not acutally deleting the object from ram?) - * !!! we have to reload the page to be SURE that nothing is tracked anymore - * actively ask for co contributors in readme and on website - * DONE - can we do some seo for our docs page? - * when linking hashbite, also offer payed services on a hourly rate - * add google ads integration as we have it ready in @stanford - * get rid of this file in the repo ;) +- other todos + - maybe its the way we store the tracking in our hooks @stanford & @maneframe why tracking stays active even when user denies (set reference of object ot null is not acutally deleting the object from ram?) + - !!! we have to reload the page to be SURE that nothing is tracked anymore + - actively ask for co contributors in readme and on website + - DONE - can we do some seo for our docs page? + - when linking hashbite, also offer payed services on a hourly rate + - add google ads integration as we have it ready in @stanford + - get rid of this file in the repo ;) diff --git a/packages/docs/docs/quick-start.md b/packages/docs/docs/quick-start.md index d7789023..d11d2f62 100644 --- a/packages/docs/docs/quick-start.md +++ b/packages/docs/docs/quick-start.md @@ -2,9 +2,10 @@ id: quick-start-guide title: Quick Start Guide --- + # Quick Start Guide -Welcome to the Quick Start Guide for Consent Manager. This guide will help you swiftly integrate Consent Manager into your React project, aligning with GDPR requirements while enhancing user privacy. +Welcome to the Quick Start Guide for Consent Manager. This guide will help you swiftly integrate Consent Manager into your React project, aligning with GDPR requirements while enhancing user privacy. Let's dive in to understand how to install Consent Manager, set it up in your app, integrate a third-party service like Matomo, and track events efficiently. @@ -17,49 +18,51 @@ npm install @consent-manager/core @consent-manager/interface-default use-persist ``` ## Setting Up Consent Manager in Your React App + Create a file named `consent-manager.js` in your project. This file will configure and export the `ConsentManagerWrapper` component. Add the following code to this file: ```javascript -import React from 'react'; -import { ConsentManagerDefaultInterface } from '@consent-manager/interface-default'; -import '@consent-manager/interface-default/dist/default.min.css'; +import React from 'react' +import { ConsentManagerDefaultInterface } from '@consent-manager/interface-default' +import '@consent-manager/interface-default/dist/default.min.css' -import createPersistedState from 'use-persisted-state'; +import createPersistedState from 'use-persisted-state' // We store our consent information in localStorage -const useConsentStateStore = createPersistedState('consent-manager'); +const useConsentStateStore = createPersistedState('consent-manager') // Add your configuration here if necessary const config = { // ... your configuration options ... -}; +} export const ConsentManagerWrapper = ({ children }) => { - const storage = useConsentStateStore(); + const storage = useConsentStateStore() return ( {children} - ); -}; + ) +} ``` ## Wrapping Your Application with Consent Manager + In your main `index.js` (or `layout.js`, depending on your project structure), import and use the `ConsentManagerWrapper` to wrap your application: ```javascript -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import { ConsentManagerWrapper } from './consent-manager'; +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' +import { ConsentManagerWrapper } from './consent-manager' ReactDOM.render( , document.getElementById('root') -); +) ``` Your application now includes Consent Manager, displaying the shield 🛡️ icon at the bottom left. Next, let's incorporate some integrations into your page, enabling users to provide their consent. @@ -69,6 +72,7 @@ Your application now includes Consent Manager, displaying the shield 🛡️ ico [Matomo is a robust, open-source alternative to SAAS tracking solutions](https://matomo.org/google-analytics-alternative/), offering full data control and GDPR-friendly implementation. ### Installing Matomo Integration + First, add the [Matomo integration](./integrations/matomo.md) to your project: ```bash @@ -76,24 +80,25 @@ npm install @consent-manager/integration-matomo ``` ### Configuring Matomo in Consent Manager + Update `consent-manager.js` to include Matomo in the integrations: ```javascript // Add this to your consent-manager.js imports -import { matomoIntegration } from '@consent-manager/integration-matomo'; +import { matomoIntegration } from '@consent-manager/integration-matomo' // Update your configuration const consentManagerConfig = { integrations: [ matomoIntegration({ - matomoURL: "https://statistics.yourdomain.com/", - siteID: "YOUR_SITE_ID", + matomoURL: 'https://statistics.yourdomain.com/', + siteID: 'YOUR_SITE_ID', }), ], -}; +} // Include in ConsentManagerDefaultInterface - +; {children} ``` @@ -101,20 +106,21 @@ const consentManagerConfig = { **Note:** For React Router or similar setups, see our [client-side routing documentation](./guides/client-side-routing.md) to ensure proper page view tracking. ### Tracking Events with Matomo + All integrations, including Matomo, follow a similar interface for event tracking: ```jsx -import { getMatomoTracker } from '@consent-manager/integration-matomo'; +import { getMatomoTracker } from '@consent-manager/integration-matomo' const SomeComponent = () => { - const { trackEvent } = getMatomoTracker(); + const { trackEvent } = getMatomoTracker() const onTrack = useCallback(() => { - trackEvent('Example', 'Button', 'Pressed'); - }, [trackEvent]); + trackEvent('Example', 'Button', 'Pressed') + }, [trackEvent]) - return ; -}; + return +} ``` [Learn more about Matomo integration](./integrations/matomo.md). @@ -137,7 +143,7 @@ Add YouTube to your integrations in `consent-manager.js`: ```javascript // Import YouTube integration -import { youtubeIntegration } from '@consent-manager/integration-youtube'; +import { youtubeIntegration } from '@consent-manager/integration-youtube' // Update your consent manager configuration const consentManagerConfig = { @@ -145,28 +151,29 @@ const consentManagerConfig = { // ... other integrations youtubeIntegration(), ], -}; +} // The rest of the file remains unchanged ``` ### Wrapping YouTube Videos for Consent + Use the `PrivacyShield` component to wrap YouTube embeds: ```javascript -import React from 'react'; -import ReactYouTube from 'react-youtube'; -import { PrivacyShield } from '@consent-manager/core'; +import React from 'react' +import ReactYouTube from 'react-youtube' +import { PrivacyShield } from '@consent-manager/core' const YouTube = ({ id, ...props }) => { return ( - ); -}; + ) +} -export default YouTube; +export default YouTube ``` [Explore more about YouTube integration](./integrations/youtube.md). @@ -177,5 +184,5 @@ You now have the fundamental knowledge to integrate Consent Manager into your Re ### Further guides -* [Styling Consent Manager](./interface-default/styling.md) -* [i18n Support](./guides/i18n.md) \ No newline at end of file +- [Styling Consent Manager](./interface-default/styling.md) +- [i18n Support](./guides/i18n.md) diff --git a/packages/docs/docs/todo.md b/packages/docs/docs/todo.md index 8956c0be..f964a9fa 100644 --- a/packages/docs/docs/todo.md +++ b/packages/docs/docs/todo.md @@ -3,4 +3,4 @@ id: todo title: This Page is Under Construction --- -Apologies for the inconvenience. This page is currently in progress. We're actively working on adding more content here, so stay tuned! \ No newline at end of file +Apologies for the inconvenience. This page is currently in progress. We're actively working on adding more content here, so stay tuned! diff --git a/packages/interface-default/src/fallback-component.tsx b/packages/interface-default/src/fallback-component.tsx index 08734a1b..bde8098b 100644 --- a/packages/interface-default/src/fallback-component.tsx +++ b/packages/interface-default/src/fallback-component.tsx @@ -13,8 +13,8 @@ import { ConsentManagerDefaultInterfaceContext } from './context' interface StyleableFallbackComponentProps extends FallbackComponentProps { styles: Styles - Button: React.ComponentType - ToggleIcon: React.ComponentType + Button: React.FC + ToggleIcon: React.FC } export const FallbackComponent: React.FC = ({ diff --git a/packages/interface-default/src/form.tsx b/packages/interface-default/src/form.tsx index e2c588d4..fd4a4a64 100644 --- a/packages/interface-default/src/form.tsx +++ b/packages/interface-default/src/form.tsx @@ -13,10 +13,10 @@ import { ConsentManagerDefaultInterfaceContext } from './context' export interface ConsentFormProps extends DecisionsFormProps { styles: Styles - ToggleIcon: React.ComponentType - CloseIcon: React.ComponentType - Switch: React.ComponentType - Button: React.ComponentType + ToggleIcon: React.FC + CloseIcon: React.FC + Switch: React.FC + Button: React.FC } interface FormState { diff --git a/packages/interface-default/src/i18n.tsx b/packages/interface-default/src/i18n.tsx index 54f4fae2..60543eac 100644 --- a/packages/interface-default/src/i18n.tsx +++ b/packages/interface-default/src/i18n.tsx @@ -1,30 +1,30 @@ import React from 'react' export interface Messages { - [key: string]: React.ReactNode | React.ComponentType - 'consent-manager.integration.default.company'?: React.ComponentType<{ - IntegrationLabel: React.ComponentType + [key: string]: React.ReactNode | React.FC + 'consent-manager.integration.default.company'?: React.FC<{ + IntegrationLabel: React.FC }> - 'consent-manager.integration.default.category'?: React.ComponentType<{ + 'consent-manager.integration.default.category'?: React.FC<{ category: string }> - 'consent-manager.integration.default.title'?: React.ComponentType<{ + 'consent-manager.integration.default.title'?: React.FC<{ title: string }> - 'consent-manager.integration.default.description'?: React.ComponentType<{ + 'consent-manager.integration.default.description'?: React.FC<{ description: string - PrivacyPolicyLink: React.ComponentType + PrivacyPolicyLink: React.FC }> - 'consent-manager.integration.default.privacy-policy'?: React.ComponentType<{ + 'consent-manager.integration.default.privacy-policy'?: React.FC<{ Link: React.FC title: string }> - 'consent-manager.fallback.default.description'?: React.ComponentType<{ - IntegrationLabel: React.ComponentType + 'consent-manager.fallback.default.description'?: React.FC<{ + IntegrationLabel: React.FC category: string title: string }> - 'consent-manager.fallback.default.enable'?: React.ComponentType<{ + 'consent-manager.fallback.default.enable'?: React.FC<{ category: string title: string }> diff --git a/packages/interface-default/src/index.tsx b/packages/interface-default/src/index.tsx index bec5458f..969558fb 100644 --- a/packages/interface-default/src/index.tsx +++ b/packages/interface-default/src/index.tsx @@ -45,12 +45,12 @@ export interface ConsentManagerDefaultInterfaceDesignProps { noActionDelay?: number styles?: Styles animationStyles?: Styles - ToggleButton?: React.ComponentType - ToggleIcon?: React.ComponentType - CloseIcon?: React.ComponentType - Switch?: React.ComponentType - Button?: React.ComponentType - Form?: React.ComponentType + ToggleButton?: React.FC + ToggleIcon?: React.FC + CloseIcon?: React.FC + Switch?: React.FC + Button?: React.FC + Form?: React.FC } interface ConsentManagerDefaultInterfaceProps diff --git a/packages/interface-default/src/integration.tsx b/packages/interface-default/src/integration.tsx index 40caf1fc..bcf5c4e7 100644 --- a/packages/interface-default/src/integration.tsx +++ b/packages/interface-default/src/integration.tsx @@ -10,7 +10,7 @@ import { Styles } from '.' export interface IntegrationProps extends IntegrationConfigOptions { styles: Styles - Switch?: React.ComponentType + Switch?: React.FC } const Link: React.FC<{ diff --git a/packages/interface-default/src/introduction.tsx b/packages/interface-default/src/introduction.tsx index c0bd722e..bd66852e 100644 --- a/packages/interface-default/src/introduction.tsx +++ b/packages/interface-default/src/introduction.tsx @@ -18,13 +18,13 @@ import defaultAnimationStyles from './animation-slide.module.css' import { ConsentManagerDefaultInterfaceContext } from './context' export interface IntroductionProps { - CloseIcon: React.ComponentType + CloseIcon: React.FC introductionFinished: () => void styles?: Styles animationStyles?: Styles slideDuration: number noActionDelay?: number - Button: React.ComponentType + Button: React.FC } interface ActivityDetector { diff --git a/packages/interface-default/src/toggle-button.tsx b/packages/interface-default/src/toggle-button.tsx index ebd0f025..c07e9582 100644 --- a/packages/interface-default/src/toggle-button.tsx +++ b/packages/interface-default/src/toggle-button.tsx @@ -10,7 +10,7 @@ import { ConsentManagerDefaultInterfaceContext } from './context' export interface ToggleButtonProps { styles: Styles animationStyles?: Styles - ToggleIcon: React.ComponentType + ToggleIcon: React.FC toggleControlForm: (e: MouseEvent) => void slideDuration?: number }