Skip to content

Schema-driven form system for React and React Native

Notifications You must be signed in to change notification settings

devitools/anhanga

Repository files navigation

Anhanga

Schema-driven forms for React. Define your fields once, get type-safe forms, tables, validation, events, and actions — all from a single source of truth.

import { text, Text, date, toggle, group, action, Position, Scope } from '@anhanga/core'

const PersonSchema = schema.create('person', {
  groups: {
    basic: group(),
    address: group(),
  },
  fields: {
    name: text().width(100).required().column().group('basic'),
    email: text().kind(Text.Email).width(60).required().column().group('basic'),
    phone: text().kind(Text.Phone).width(40).group('basic'),
    birthDate: date().width(30).group('basic'),
    active: toggle().width(20).default(true).column().group('basic'),
    street: text().kind(Text.Street).width(60).group('address'),
    city: text().kind(Text.City).width(40).group('address'),
  },
  actions: {
    custom: action().icon(Icon.Send).warning().positions(Position.footer).scopes(Scope.add),
  },
})

No labels in code. No boilerplate. Full TypeScript inference.

Documentation

Visit the full documentation for guides, API reference, and examples.

Packages

Package Description
@anhanga/core Schema definition, field types, actions, groups, type system
@anhanga/react useDataForm / useDataTable hooks, renderer registry, validation

Installation

pnpm add @anhanga/core @anhanga/react

Development

pnpm install
pnpm build          # build core and react
pnpm test           # run all tests
pnpm docs:dev       # documentation dev server

License

MIT

About

Schema-driven form system for React and React Native

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published