react-age-gate

v1.0.2

Published

a year ago

This project provides a customizable, accessible, and responsive age gate component for React applications built with Vite and TypeScript. It prevents access to content until the user confirms they meet a minimum age requirement.

Downloads

0High
0Medium
0Low

kkit

React Age Gate Component

Features

Flexible Confirmation Types: Supports date picker (datePicker) and boolean (yes/no) (boolean) confirmation methods.
Customizable Appearance: Allows extensive styling through props, including:
- Background image
- Overlay background color and opacity
- Logo
- Header and subheader text
- Minimum age
- Modal background color
- Font family and color
- Custom underage message
- Direct CSS override props for the overlay and modal
Accessibility:
- Focus trapping within the modal for keyboard navigation.
- ARIA attributes for screen readers.
- Proper semantic HTML.
Persistence: Remembers user confirmation for 30 days using localStorage. Automatically clears expired confirmations.
Body Scroll Locking: Prevents scrolling of the main page while the age gate is active.
Easy Integration: Uses HTML data attributes for configuration, making it simple to integrate into existing projects.
Built with: React, TypeScript, and Vite.

Installation

This assumes you have a React project set up. If not, create one using Vite:

npm create vite@latest my-project -- --template react-ts
cd my-project

Then, install the age-gate component (This step is conceptual, as it is not published to npm):

npm install age-gate # Replace with actual package name if published

You would then need to build the age-gate project locally, and link it to your project.

Usage

Import the component:

import AgeGate from 'age-gate'; // Or your local path
import 'age-gate/dist/style.css'; // Import the styles, adjust path if necessary.  This file doesn't exist in your provided code, but is good practice.

Add the AgeGate component to your application:

The recommended way is to use src/agegate-app.tsx to render the AgeGate component into a dedicated div. This keeps your main application and the age gate logic separate.

In your index.html, add a div with the ID "agegate":

<body>
  <div id="agegate"></div>
  <script type="module" src="https://unpkg.com/react-age-gate@^1.0.1/out/script.js"></script>
</body>

Then, in src/agegate-app.tsx, render the AgeGate component:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import AgeGate from "./components/AgeGate.tsx";

const rootElement = document.getElementById("agegate");
if (!rootElement) {
  throw new Error("No root element found");
}

const dataset = rootElement.dataset;

const ageGateProps = {
  ...dataset,
  confirmationType:
    dataset.confirmationType === "boolean" ? "boolean" : "datePicker",
  bgOpacity: dataset.bgOpacity ? parseFloat(dataset.bgOpacity) : undefined,
  minAge: dataset.minAge ? parseInt(dataset.minAge, 10) : undefined,
};

createRoot(rootElement).render(
  <StrictMode>
    <AgeGate {...ageGateProps} />
  </StrictMode>
);

Configure using HTML data attributes:

You can configure the AgeGate component directly in your HTML using data attributes on the agegate div. This is the preferred method, as it avoids hardcoding settings in your JavaScript.

<div id="agegate"
    data-confirmation-type="datePicker"
    data-background-image="url(/path/to/your/image.jpg)"
    data-bg-color="#000"
    data-bg-opacity="0.8"
    data-header-text="Welcome to Our Site"
    data-subheader-text="You must be 21 or older to enter."
    data-logo="url(/path/to/your/logo.svg)"
    data-min-age="21"
    data-modal-bg-color="white"
    data-font-family="Arial, sans-serif"
    data-font-color="#333"
    data-underage-message="Sorry, you must be of legal age to access this content."
    data-overlay-style='{"border": "1px solid red"}'
    data-modal-style='{"boxShadow": "0 0 20px rgba(0,0,0,0.5)"}'
></div>

All data attributes are optional. Defaults will be used if they are not provided.
Attribute names correspond to the component's props (e.g., data-background-image maps to the backgroundImage prop).
For overlayStyle and modalStyle, pass a valid JSON string representing a CSSProperties object.

Alternatively, configure using props: You can also pass props directly to the <AgeGate> component in src/agegate-app.tsx if you prefer to configure it in JavaScript:

  <AgeGate
      confirmationType="boolean"
      headerText="Are you over 18?"
      minAge={18}
      underageMessage="You must be 18 or older to enter."
  />

Props

| Prop Name | Type | Default | Description | | ------------------ | ---------------------------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | confirmationType | "datePicker" \| "boolean" \| string | "datePicker" | Determines the confirmation method. "datePicker" presents a date input. "boolean" presents "Yes" and "No" buttons. Any other string will be treated as "datePicker". | | backgroundImage | string | undefined | URL of the background image. | | bgColor | string | "#000" | Background color of the overlay (used as a tint). | | bgOpacity | number | 1 | Opacity of the overlay (0.0 to 1.0). | | headerText | string | "Welcome" | Main header text. | | subheaderText | string | undefined | Subheader text (displayed below the header). | | logo | string | undefined | URL of the logo image. | | minAge | number | 21 | Minimum age required for access. | | modalBgColor | string | "white" | Background color of the modal. | | fontFamily | string | undefined | Font family for the text. | | fontColor | string | undefined | Color of the text. | | underageMessage | string | "" | Message displayed to users who do not meet the age requirement. | | overlayStyle | React.CSSProperties | {} | Additional CSS styles to apply to the overlay. Use this for fine-grained control. Properties provided here will override the defaults. Pass a valid JavaScript object (not a JSON string) when using this prop directly in JSX, or a JSON string when using the data-overlay-style attribute. | | modalStyle | React.CSSProperties | {} | Additional CSS styles to apply to the modal. Use this for fine-grained control. Properties provided here will override the defaults. Pass a valid JavaScript object (not a JSON string) when using this prop directly in JSX, or a JSON string when using the data-modal-style attribute. |

Development

npm run dev: Starts the development server.
npm run build: Builds the component for production.
npm run lint: Runs ESLint.
npm run preview: Serves the built component for preview.

Contributing

Pull requests are welcome!

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme