@lucky-media/react-headless-cookie

This is a headless react cookie package, it comes unopinionated and unstyled. The main purpose we built this package is to allow us configurability while still maintain the Cookie set/hide logic.

The <Cookie> component accepts a <Cookie.Button> component which sets the cookie with the name on settings prop. See below for prop reference.

This package wraps the popular js-cookie.

Install

npm i @lucky-media/react-headless-cookie

Usage

import React from 'react'
import { Cookie } from '@lucky-media/react-headless-cookie'

const styles = {
  width: '100%',
  backgroundColor: '#000',
  color: 'white',
  bottom: '0px',
  padding: '1rem'
}

const App = () => {
  return (
    <Cookie style={styles} settings={{ name: 'cookie' }}>
      <div>This website is using cookies</div>
      <Cookie.Button>Accept</Cookie.Button>
    </Cookie>
  )
}

Props for Cookie component

Prop	Type	Required	Description
children	Node	yes	Accepts React Component nodes / elements to render
style	Object	no	Style object used for styling the main container of Cookie, has a default value for position, zIndex and display.
className	String	no	className string used for styling the main container of Cookie.
delay	Number	no	Add a delay before showing the popup. Defaults to 2000ms.
settings	Object	yes	Cookie settings, accepts name (string) and duration (number). More settings can be added check the js-cookie documentation
settings.name	String	yes	Cookie name
settings.duration	Number	no	Cookie duration in days, defaults to 180.

Props for Cookie.Button

Prop	Type	Required	Description
children	Node	yes	Accepts React Component / elements nodes to render
style	Object	no	style object used for styling the button
className	String	no	className string used for styling the button
as	String	no	Tag on how to render the button, defaults to button

Examples

Checkout these examples we built with Tailwind CSS on how to use the plugin

• First Example

License

MIT © lucky-media