📝

Form

Dynamic form with validation and error handling

94%
Code Reduction
400
Traditional Lines
24
Factory Lines
5
Frameworks

Code Example

const ContactForm = ui.createForm({
  schema: z.object({
    name: z.string().min(1, 'Name is required'),
    email: z.string().email('Invalid email'),
    message: z.string().min(10, 'Message too short')
  }),
  fields: [
    { name: 'name', label: 'Name', type: 'text' },
    { name: 'email', label: 'Email', type: 'email' },
    { name: 'message', label: 'Message', type: 'textarea' }
  ],
  onSubmit: async (data) => {
    await sendEmail(data);
  }
});

Usage

1. Install the package

npm install @vladimirdukelic/revolutionary-ui-factory

2. Import and setup

import { setup } from '@vladimirdukelic/revolutionary-ui-factory';
const ui = setup();

3. Create your component

Use the code example above to create your Form component with 94% less code!

Features

  • Schema-based validation
  • Async validation
  • Field dependencies
  • Error messages
  • Submit handling
  • Reset functionality

Supported Frameworks

React
Vue
Angular
Svelte
Solid