FaasJS 3.7.0 introduit un puissant composant Form headless qui permet aux développeurs de créer des formulaires personnalisés avec un minimum de code. En tant que framework full-stack atomique basé sur TypeScript, l’intégration transparente de FaasJS avec React rend le développement de formulaires plus simple que jamais.
Pourquoi un nouveau composant Form?
Les formulaires sont parmi les aspects les plus courants mais aussi les plus fastidieux du développement. Nous devons gérer la mise en page, la gestion des états, la validation des données, la logique de soumission, et plus encore. La diversité des styles de formulaires selon les plateformes et les spécifications de conception complique davantage le développement.
Le nouveau composant Form headless est conçu pour résoudre ces problèmes. Il offre:
- Une conception d’API épurée, implémentant les fonctionnalités de formulaire avec un code minimal
- Une gestion d’état intégrée, éliminant la manipulation manuelle des données
- Un mécanisme de validation flexible, prenant en charge la validation synchrone et asynchrone
- Une interface entièrement personnalisable, facilement adaptable à différentes plateformes
- Une sécurité de type avec support TypeScript complet
Comment l’utiliser?
L’utilisation de base est simple. Vous pouvez créer un formulaire entièrement fonctionnel avec quelques lignes de code:
import { Form } from '@faasjs/react'
function MyForm() {
return <Form
items={[ // Configuration du contenu du formulaire
{ name: 'name', roles: { required: true } }, // Validation intégrée
]}
onSubmit={async (values) => { // Soumettre le formulaire après validation, supporte les opérations asynchrones
console.log(values)
}}
/>
}
Si vous devez personnaliser les éléments du formulaire, le composant Form offre de puissantes capacités de personnalisation. Le même modèle fonctionne pour le Web et React Native:
import { Form, type FormProps, type FormElementTypes } from '@faasjs/react'
// Composant Input personnalisé
const MyInput = ({ value, onChange }) => <input className='border rounded' value={value} onChange={e => onChange(e.target.value)} />
const MyFormElements = {
Input: MyInput,
}
// Composant Form personnalisé
function MyForm<
T extends Record<string, any> = Record<string, any>,
FormElements extends FormElementTypes = typeof MyFormElements,
>(props: FormProps<T, FormElements>) {
return <Form
Elements={MyFormElements}
{...props}
/>
}
Cette conception vous permet de maintenir une logique de formulaire cohérente tout en personnalisant librement l’interface pour différents scénarios. Que ce soit pour des applications d’entreprise ou des petits projets, vous pouvez facilement créer des interactions de formulaire professionnelles.
Pour plus de fonctionnalités avancées et de meilleures pratiques, visitez notre site de documentation. Nous apporterons plus de fonctionnalités utiles dans les versions à venir, restez à l’écoute.