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

$3

1. Install the package:
``bash
npm install @jmeirinkmarimed/age-gate
`

2. Import and use the component:
`jsx
import { AgeGate } from '@jmeirinkmarimed/age-gate';

function App() {
return (
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"
/>
);
}
`




$3

1. Add the script to your page:
`html

`

2. Insert the component anywhere in your HTML:
`html
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"
>
``

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

$3

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

$3

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

$3

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