Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-hook-consent
Advanced tools
react-hook-consent - npm Package Compare versions
Comparing version 3.5.1 to 3.5.2
| import { ReactNode } from 'react'; | ||
| import { ConsentBannerSettingsModal } from './settings/Settings'; | ||
| type ConsentBannerProps = { | ||
| export type ConsentBannerProps = { | ||
| children?: ReactNode; | ||
@@ -19,2 +19,1 @@ settings?: { | ||
| export declare function ConsentBanner({ children, settings, approve, decline }: ConsentBannerProps): JSX.Element; | ||
| export {}; |
| { | ||
| "name": "react-hook-consent", | ||
| "version": "3.5.1", | ||
| "version": "3.5.2", | ||
| "description": "React consent management solution and banner for cookies and (external) scripts.", | ||
@@ -5,0 +5,0 @@ "scripts": { |
154
README.md
@@ -12,2 +12,10 @@  | ||
| ## Demo | ||
| Check out the [CodeSandbox](https://codesandbox.io/s/example-react18-7d1rcb) for a working example. | ||
| ## Documentation | ||
| - [Documentation](https://lukaskupczyk.github.io/react-hook-consent/) | ||
| ## Features | ||
@@ -25,8 +33,2 @@ | ||
| ## Examples | ||
| Check out the [CodeSandbox](https://codesandbox.io/s/example-react18-7d1rcb) for a working example. | ||
| More examples for React and Next.js are included in the `examples` folder of the repository. | ||
| ## Installation | ||
@@ -44,6 +46,4 @@ | ||
| ### Provider | ||
| Wrap the application in the `ConsentProvider`. Provide settings via the `options` prop. Optionally use the `ConsentBanner` component to display a consent banner to the user. | ||
| Wrap the application in the `ConsentProvider`. Provide settings via the `options` prop. | ||
| ```typescript | ||
@@ -54,4 +54,7 @@ /* | ||
| import { ConsentProvider } from 'react-hook-consent'; | ||
| import { ConsentBanner, ConsentProvider } from 'react-hook-consent'; | ||
| // styling | ||
| import 'react-hook-consent/dist/styles/style.css'; | ||
| // ... | ||
@@ -79,125 +82,14 @@ <ConsentProvider | ||
| <App /> | ||
| <ConsentBanner | ||
| settings={{ hidden: false, label: 'More', modal: { title: 'Modal title' } }} | ||
| decline={{ hidden: false, label: 'No' }} | ||
| approve={{ label: 'Yes' }} | ||
| > | ||
| <> | ||
| Can we use cookies and external services according to our <a href="test">privacy policy</a> to improve the | ||
| browsing experience? | ||
| </> | ||
| </ConsentBanner> | ||
| </ConsentProvider>; | ||
| // ... | ||
| ``` | ||
| #### Options Prop | ||
| | Name | Type | Required | Description | Default | | ||
| | ---------- | ----------------------- | -------- | ---------------------------------------------------- | ------- | | ||
| | services | ConsentOptionsService[] | yes | The configuration of the services to be covered | | | ||
| | customHash | string | | A custom hash to detect if options have been updated | | | ||
| | theme | Theme | | Configuration of light or dark theme | dark | | ||
| The `services` array can be configured as follows: | ||
| | Name | Type | Required | Description | | ||
| | -------------- | ----------------------------------- | -------- | ------------------------------------------------------------------- | | ||
| | id | string | yes | A unique id for the service, e.g. 'myid' | | ||
| | name | string | yes | The name of the service, e.g. 'My Service' | | ||
| | description | string | | The description of the service, e.g. 'My ID is a tracking service.' | | ||
| | scripts | Array<ScriptExternal \| ScriptCode> | | External script or code to load upon consent | | ||
| | cookies | Cookie[] | | Configuration of cookies to delete them upon decline | | ||
| | localStorage | string[] | | Configuration of local storage to delete them upon decline | | ||
| | sessionStorage | string[] | | Configuration of session storage to delete them upon decline | | ||
| | mandatory | boolean | | If true, the service is mandatory and cannot be declined | | ||
| `ScriptExternal` has the following options: | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | ------------------------------------------------------------- | | ||
| | id | string | yes | A unique id for the script, e.g. 'myscript' | | ||
| | src | string | yes | The link to the script, e.g. 'https://myscript.com/script.js' | | ||
| `ScriptCode` has the following options: | ||
| | Name | Type | Required | Description | | ||
| | ---- | ------ | -------- | ------------------------------------------------------------------ | | ||
| | id | string | yes | A unique id for the script, e.g. 'myscript' | | ||
| | code | string | yes | The js Code of the script, e.g. `alert("I am a JavaScript code");` | | ||
| `Cookie` has the following options: | ||
| | Name | Type | Required | Description | | ||
| | ------- | ---------------- | -------- | ----------------------------------------- | | ||
| | pattern | string \| RegExp | yes | The name or a regex pattern of the cookie | | ||
| ### Banner | ||
| Optionally use the banner component to render a banner to show a consent dialogue. | ||
| ```typescript | ||
| /* | ||
| * index.tsx | ||
| */ | ||
| import { ConsentBanner } from 'react-hook-consent'; | ||
| // styling | ||
| import 'react-hook-consent/dist/styles/style.css'; | ||
| // ... | ||
| <App /> | ||
| <ConsentBanner | ||
| settings={{ hidden: false, label: 'More', modal: { title: 'Modal title' } }} | ||
| decline={{ show: true, label: 'No' }} | ||
| approve={{ label: 'Yes' }} | ||
| > | ||
| <> | ||
| Can we use cookies and external services according to our <a href="test">privacy policy</a> to | ||
| improve the browsing experience? | ||
| </> | ||
| </ConsentBanner> | ||
| // ... | ||
| ``` | ||
| #### Props | ||
| | Name | Type | Required | Description | Default | | ||
| | --------------- | -------------------------- | -------- | ----------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | children | ReactNode | | The consent message | We want to use cookies and external services to analyze and improve this website for you. You will find more details in our privacy policy. | | ||
| | settings.hidden | boolean | | Hide the detailed settings button | false | | ||
| | settings.label | string \| ReactNode | | Label of detailed settings button | Settings | | ||
| | settings.modal | ConsentBannerSettingsModal | | Configuration of the settings modal | | | ||
| | approve.label | string \| ReactNode | | Label of approve button | Approve | | ||
| | decline.label | string \| ReactNode | | Label of decline button | Decline | | ||
| | decline.hidden | boolean | | Hide the decline button | false | | ||
| `ConsentBannerSettingsModal` has the following options: | ||
| | Name | Type | Required | Description | | ||
| | ---------------- | ------------------- | -------- | --------------------------- | | ||
| | title | string \| ReactNode | | The title of the modal | | ||
| | description | string \| ReactNode | | The description text | | ||
| | decline.hidden | boolean | | Hide the decline button | | ||
| | decline.label | string \| ReactNode | | Label of decline button | | ||
| | approve.label | string \| ReactNode | | Label of approve button | | ||
| | approveAll.label | string \| ReactNode | | Label of approve all button | | ||
| ### Hooks | ||
| Use the provided `useConsent` hook to access or update the current consent and show or hide the banner. | ||
| ```typescript | ||
| /* | ||
| * App.tsx | ||
| */ | ||
| import { useConsent } from 'react-hook-consent'; | ||
| // ... | ||
| const { consent, setConsent, isBannerVisible, toggleBanner, isDetailsVisible, toggleDetails } = useConsent(); | ||
| // ... | ||
| ``` | ||
| #### Return | ||
| | Object Name | Type | Description | | ||
| | ---------------- | ---------------------------- | --------------------------------------------------- | | ||
| | consent | Consent[] | Services which have been consent to | | ||
| | hasConsent | (id: Consent) => boolean | Get consent state of specific id | | ||
| | isBannerVisible | boolean | Indicates if consent banner is visible | | ||
| | toggleBanner | () => void | Shows or hides the consent banner | | ||
| | setConsent | (consent: Consent[]) => void | Update consent by providing consent ids to be saved | | ||
| | isDetailsVisible | boolean | Indicates if details / settings modal is visible | | ||
| | toggleDetails | () => void | Shows or hides the details / settings modal | |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Worsened metrics
- Total package byte prevSize
- decreased by-3.2%
225976
- Lines of code
- decreased by-0.23%
426
- Number of lines in readme file
- decreased by-54.27%
91
No dependency changes