Component
CaseGate
It hides its children until you type six letters that alternate uppercase and lowercase; one mistake erases the whole attempt.
01 / Preview
Try it yourself.
0 of 6 alternating letters accepted.
Type alternating uppercase and lowercase letters. One mistake erases the attempt.
Mechanism
- 1
- Click the input and start with any letter.
- 2
- Switch case on every next letter, such as aBcDeF.
- 3
- A wrong case resets all accepted keys.
- 4
- Six correct keys uncover the content.
02 / Usage
Put it somewhere.
example.tsxTSX
import { CaseGate } from "gra-ui";
import "gra-ui/styles.css";
export function CarefullyHidden() {
return <CaseGate>Release notes</CaseGate>;
}03 / API
Small surface area.
PropTypeDescription
childrenReactNodeThe content revealed after six alternating-case letters.