Skip to content
virastackPublic

Repository files navigation

ViraStack Form

Headless React form hooks: input masks, passwords and Turkish addresses

ViraStack Form License: MIT @virastack


Open source, headless and type-safe: each package renders nothing, ships its own types, and leaves inputs and styles to you. Mask and Address check field names against your form's type.

Packages

Package Version What it does
@virastack/mask npm Zero-dependency input masks for React Hook Form, with Turkish presets (TCKN, VKN, IBAN) and server validation
@virastack/password npm Accessible password hook for React: visibility, NIST-style strength, confirmation, server validation and leaked password checks
@virastack/address npm Headless Turkish address hook for React: chained province, district and neighbourhood selects, derived postal codes, server validation and the PTT dataset
pnpm add @virastack/mask
pnpm add @virastack/password
pnpm add @virastack/address

Each package is versioned and installed on its own. Using one does not pull in the others.

Using them together

All three write into the same React Hook Form. A checkout with a masked TCKN and phone, a password and an address fills one set of values:

const form = useForm<Checkout>();
const { tckn, phone } = useViraMask(form, { tckn: { preset: "tckn" }, phone: { preset: "phone", country: "TR" } });
const password = useViraPassword({ value: form.watch("password") });
const address = useViraAddress({ form });

form.reset(), setValue(), resolvers, FormProvider, field arrays and StrictMode are covered for all three together in rhf-scenarios.test.tsx.

Repository layout

packages/
├── mask/          → @virastack/mask
├── password/      → @virastack/password
└── address/       → @virastack/address

Shared infrastructure lives at the root: tsconfig.base.json, eslint.config.base.mjs, and the catalog in pnpm-workspace.yaml that keeps one version of every build tool.

pnpm install        # whole workspace
pnpm build          # every package
pnpm test           # every test
pnpm check          # typecheck + lint + coverage + build + package checks + size

Working on one package:

pnpm --filter @virastack/mask test
pnpm --filter @virastack/password build

Contributing

Label issues with the package they belong to — pkg:mask, pkg:password, pkg:address. The "report a bug" links in each package README add the label for you.

Ecosystem

Part of the ViraStack ecosystem: Academy · Start · AI · Guide

License

MIT © Ömer Gülçiçek