AgeGate: React Age Verification Component

AgeGate is a modular React component that serves as an age verification modal. It prevents underage users from accessing your content and provides flexible integration options—whether you're working with a React project or an HTML website.

Features

• Age Verification:
  Choose between three verification methods: date inputs, calendar picker, or yes/no confirmation.
• Persistent Verification:
  Verification status is stored in localStorage so verified users won't need to re-confirm.
• Customizable Styling:
  Full control over colors, images, fonts, and text with style isolation to prevent CSS conflicts.
• Universal Support:
  Use as a React component or a custom HTML element.

Getting Started

1. React Projects

1. Install the package:

npm install @jmeirinkmarimed/age-gate

2. Import and use the component:

import { AgeGate } from '@jmeirinkmarimed/age-gate';

function App() {
  return (
    <AgeGate 
      minAge={21}
      confirmationType="dateInputs"
      headerText="To enter this site, you need to be 21 or older."
      subHeaderText="Please confirm your age"
      logo="path/to/your/logo.png"
      logoWidth="200px"
      backgroundColor="#000000"
      textColor="#ffffff"
      buttonColor="#ffffff"
      buttonTextColor="#000000"
      buttonHoverColor="#e6e6e6"
      buttonHoverTextColor="#000000"
      confirmButtonText="Enter"
      fontFamily="Montserrat"
    />
  );
}

2. HTML Websites

1. Add the script to your page:

<script src="https://unpkg.com/@jmeirinkmarimed/age-gate/dist/age-gate.min.js"></script>

2. Insert the component anywhere in your HTML:

<age-gate
  min-age="21"
  confirmation-type="dateInputs"
  header-text="To enter this site, you need to be 21 or older."
  sub-header-text="Please confirm your age"
  logo="path/to/your/logo.png"
  logo-width="200px"
  background-color="#000000"
  text-color="#ffffff"
  button-color="#ffffff"
  button-text-color="#000000"
  button-hover-color="#e6e6e6"
  button-hover-text-color="#000000"
  confirm-button-text="Enter"
  font-family="Montserrat"
></age-gate>

Props/Attributes

| Prop | Type | Required | Default | Description | |------|------|----------|---------|-------------| | minAge | number | Yes | - | Minimum age required | | confirmationType | string | No | "dateInputs" | "dateInputs", "calendarPicker", or "yesNo". Defaults to "dateInputs" | | headerText | string | Yes | - | Main header text | | subHeaderText | string | Yes | - | Secondary header text | | logo | string | Yes | - | Logo image URL | | logoWidth | string | No | "150px" | Width of the logo image | | backgroundColor | string | No | rgba(0, 0, 0, 0.9) | Modal background color | | textColor | string | No | #ffffff | Text color | | buttonColor | string | No | #ffffff | Button background color | | buttonTextColor | string | No | #000000 | Button text color | | buttonHoverColor | string | No | #e6e6e6 | Button hover background color | | buttonHoverTextColor | string | No | #000000 | Button text color on hover | | backgroundImage | string | No | - | Background image URL | | confirmButtonText | string | No | "Confirm" | Button text | | fontFamily | string | No | system fonts | Custom font family |

Confirmation Types

dateInputs

• Three separate input fields for MM/DD/YYYY
• Auto-focus progression between fields
• Automatic confirm button focus when complete

calendarPicker

• Calendar-style date picker
• Native date input with confirm button
• Prevents future dates

yesNo

• Simple yes/no confirmation buttons
• Quick verification for simpler use cases

Note on Custom Fonts

When using custom fonts (e.g., Montserrat), ensure you import them properly in your application. For web components, include the font in your HTML head section.