A React age verification modal component
npm install @jmeirinkmarimed/age-gateAgeGate 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.
- 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.
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 (
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"
/>
);
}
`
1. Add the script to your page:
`html`
2. Insert the component anywhere in your HTML:
`html``
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"
>
| 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 |