npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@boxfish-studio/react-cookie-manager

v1.0.2

Published

React Cookie Manager is a framework agnostic, easy-use package to help control the visitor's cookie consent.

Downloads

20

Readme

React Cookie Manager 🍪

React Cookie Manager is a framework agnostic, easy-use package to help control the visitor's cookie consent.

About 📝

React Cookie Manager reduces the workload of creating and mantaining multiple cookie consents by centralizing them into this package. Enables cookie management of following services:

  • Google Analytics Universal. (Deprecated)
  • Google Analytics 4.

Features ✨

  • Display a customizable popup to accept or reject cookies.
  • Create a cookie library showing:
    • Tables with details about site's necessary cookies and additional cookies: cookie name, provider name and url, cookie category, purpose, expiry and type.
    • Radio inputs (allow or reject all cookies) and a button to update preferences.

Installation 🧰

$ npm i @boxfish-studio/react-cookie-manager

yarn

$ yarn add @boxfish-studio/react-cookie-manager

pnpm

$ pnpm add @boxfish-studio/react-cookie-manager

How to use 📝

Configure the Disclaimer

Import the CookieManager into a component in your React app and pass the configuration with your desired theme settings:

// Disclaimer.tsx
'use client'

import { CookieManager, type SKCMConfiguration } from '@boxfish-studio/react-cookie-manager'

export default function Disclaimer(): React.JSX.Element {
	const configuration: SKCMConfiguration = {
		disclaimer: {
			title: 'This website uses cookies',
			body: 'By using this site, you agree with our use of cookies'
		},
		services: {
			googleAnalyticsUniversalId: 'UA-XXXXXXXX',
			googleAnalytics4Id: 'G-XXXXXXXX'
		},
		theme: {
			primary: '#14cabf',
			dark: '#131f37',
			medium: '#b0bfd9',
			light: '#fff'
		}
	}

	return <CookieManager configuration={configuration} />
}

Control page navigation

Import the useUpdatePathGA hook and use it with your router of preference:

Example for NextJS with the App router

'use client'

import { useEffect } from 'react'
import {
	CookieManager,
	useUpdatePathGA,
	type SKCMConfiguration
} from '@boxfish-studio/react-cookie-manager'
import { usePathname } from 'next/navigation'

export default function Disclaimer(): React.JSX.Element {
	const pathname = usePathname()
	const updatePathGA = useUpdatePathGA()

	const configuration: SKCMConfiguration = {
		// ...
	}

	useEffect(() => {
		updatePathGA(pathname)
	}, [pathname])

	return <CookieManager configuration={configuration} />
}

Add the CookieManagerProvider

Import the CookieManagerProvider and add it to the list of providers:

// ContextProviders.tsx
'use client'

import { CookieManagerProvider } from '@boxfish-studio/react-cookie-manager'

export function ContextProviders({ children }: React.PropsWithChildren): React.JSX.Element {
	return <CookieManagerProvider>{children}</CookieManagerProvider>
}

Then import it to your layout and add the <Disclaimer /> component:

// layout.tsx

import { ContextProviders } from './ContextProviders.tsx'
import { Disclaimer } from './components'

export default function RootLayout({
	children
}: Readonly<{
	children: React.ReactNode
}>): React.JSX.Element {
	return (
		<ContextProviders>
			<html lang="en">
				<body>
					{children}
					<Disclaimer />
				</body>
			</html>
		</ContextProviders>
	)
}

Show the cookie library

Import the CookieLibrary component to your svelte file and pass the configuration with your desired settings, as shown in the example below.

You can also use the library without any configuration or you can pass a theme to the configuration:

'use client'

import { CookieLibrary, type SKCMConfiguration } from '@boxfish-studio/react-cookie-manager'

export default function CookieLibraryPage() {
	const configuration: SKCMConfiguration = {
		theme: {
			primary: '#14cabf',
			dark: '#131f37',
			medium: '#b0bfd9',
			light: '#fff'
		}
	}

	return <CookieLibrary configuration={configuration} />
}

Using the internal store

You can use the useCookieManagerContext hook to know whether the services are running or not.

import { useCookieManagerContext } from '@boxfish-studio/react-cookie-manager'

export function Component() {
	const { servicesInitialized } = useCookieManagerContext()
	const isRunning = servicesInitialized.value

	// ...
}

Configuration 🪛

Custom configuration must be of type SKCMConfiguration. All available props are shown below:

type SKCMConfiguration = {
	disclaimer: {
		title?: string
		body?: string
		policyText?: string
		policyUrl?: string
		acceptButtonText?: string
		rejectButtonText?: string
	}
	services: {
		googleAnalyticsUniversalId?: string
		googleAnalytics4Id?: string
		adCookiesEnabled?: boolean
		customNecessaryCookies?: {
			name: string
			provider: string
			providerUrl: string
			purpose: string
			expiry: string
			type: string
			showDisclaimerIfMissing?: boolean
		}[]
	}
	theme: {
		primary?: string
		dark?: string
		medium?: string
		light?: string
	}
}

Disclaimer props

| Name | Description | Default value | | ---------------- | --------------------------------- | -------------------------------------------------------- | | title | The title of the popup | "Cookie Preferences" | | body | Body message of the popup | "By using this site, you agree with our use of cookies." | | policyText | Text that links to Privacy Policy | "Read our Cookie Policy" | | policyUrl | Privacy Policy url | "/privacy-policy" | | acceptButtonText | Text shown in 'Accept' button | "Accept Additional Cookies" | | rejectButtonText | Text shown in 'Reject' button | "Reject Additional Cookies" |

Services props

You must use googleAnalyticsUniversalId or googleAnalytics4Id.

| Name | Description | Default value | | -------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------- | | googleAnalyticsUniversalId | Your Google Analytics Universal key | | | googleAnalytics4Id | Your Google Analytics 4 key | | | adCookiesEnabled | Whether cookies with the category Advertising should be set in the browser and shown in the library | true | | customNecessaryCookies | Cookies that should be present in the Necessary Cookies table to inform the user their usage. To configure them see below | |

Custom necessary cookies

You can configure extra cookies that will also appear in the Cookie library by specifying them in the customNecessaryCookies property. They accept the following options:

| Name | Description | Default value | Required | Example | | ---------------------- | -------------------------------------------------------------------------- | ------------- | -------- | --------------------------- | | name | Name of the cookie | | Yes | Boxfish Cookie | | provider | Name of it's provider | | No | Boxfish | | providerUrl | URL of it's provider | | No | https://boxfish.studio | | purpose | Usage of the cookie | | Yes | "Stores the user's consent" | | expiry | Time that the cookie with remain in the user's browser since it's creation | | Yes | "30 days" | | type | Type of cookie | | Yes | "HTTP" | | showDisclamerIfMissing | Show the accept/reject popup if this cookie is missing | false | No | true |

Theme props

A 4-colour palette has been predefined following a custom style guide. You may overwrite these values in your custom configuration variable.

| Name | Description | Default value | | ------- | ----------------------------------------------------- | --------------- | | primary | Used in buttons backgrounds, anchors | #14cabf (teal) | | dark | Used in headings, body | #131f37 (black) | | medium | Used in table headings, table borders | #b0bfd9 (gray) | | light | Used in banner background colour, buttons text colour | #fff (white) |

Built with

  • React.
  • Typescript.
  • Vite

Release Package

cd cookie-manager/{framework} && pnpm package && npm publish --access=public

License

Apache 2.0 © Boxfish Studio