FaasJS 3.7.0 introduces a powerful headless Form component that enables developers to build custom forms with minimal code. As a TypeScript-based atomic full-stack framework, FaasJS’s seamless integration with React makes form development easier than ever.
Why a New Form Component?
Forms are among the most common yet tedious aspects of development. We need to handle layout, state management, data validation, submission logic, and more. The diversity of form styles across different platforms and design specifications further complicates development.
The new headless Form component is designed to address these pain points. It offers:
- Clean API design, implementing form functionality with minimal code
- Built-in state management, eliminating manual form data handling
- Flexible validation mechanism, supporting both sync and async validation
- Fully customizable interface, easily adaptable to different platforms
- Type safety with complete TypeScript support
How to Use?
The basic usage is straightforward. You can create a fully functional form with just a few lines of code:
import { Form } from '@faasjs/react'
function MyForm() {
return <Form
items={[ // Form content configuration
{ name: 'name', roles: { required: true } }, // Built-in validation
]}
onSubmit={async (values) => { // Submit form after validation, supports async operations
console.log(values)
}}
/>
}
If you need to customize form elements, the Form component provides powerful customization capabilities. The same pattern works for both Web and React Native:
import { Form, type FormProps, type FormElementTypes } from '@faasjs/react'
// Custom Input component
const MyInput = ({ value, onChange }) => <input className='border rounded' value={value} onChange={e => onChange(e.target.value)} />
const MyFormElements = {
Input: MyInput,
}
// Custom Form component
function MyForm<
T extends Record<string, any> = Record<string, any>,
FormElements extends FormElementTypes = typeof MyFormElements,
>(props: FormProps<T, FormElements>) {
return <Form
Elements={MyFormElements}
{...props}
/>
}
This design allows you to maintain consistent form logic while freely customizing the interface for different scenarios. Whether for enterprise applications or small projects, you can easily build professional form interactions.
For more advanced features and best practices, visit our documentation site. We’ll be bringing more useful features in upcoming versions, so stay tuned.