❤
npm
Sign UpSign In

react-age-gate

1.0.2 • Public • Published

React Age Gate Component

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.

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

  1. 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.

  2. 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>
);

  3. 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.

  4. 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!

/react-age-gate/

    Package Sidebar

    Install

    npm i react-age-gate

    Weekly Downloads

    2

    Version

    1.0.2

    License

    none

    Unpacked Size

    432 kB

    Total Files

    5

    Last publish

    Collaborators

    • kkit
    Try on RunKit
    Report malware