npm package: @jmeirinkmarimed/age-gate
Description: A React age verification modal component
Author: Jesse Meirink
Latest version: 1.0.34

# 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:
```bash
npm install @jmeirinkmarimed/age-gate
```

2. Import and use the component:
```jsx
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:
```html
<script src="https://unpkg.com/@jmeirinkmarimed/age-gate/dist/age-gate.min.js"></script>
```

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