union-form
v1.0.2
Published
Union form handling operations for your React.js applications
Downloads
14
Maintainers
Readme
union-form
union-form
is a dynamic form component for React with TypeScript and Tailwind CSS. It allows you to create flexible and configurable forms with built-in validation.
Features
- Dynamic Form Rendering: Define fields and their properties dynamically.
- Built-in Validation: Easily add validation rules for each field.
- Conditional Rendering: Render fields based on the state of other fields.
- Styled with Tailwind CSS: Easily customize the appearance using Tailwind CSS classes.
Installation
Install the package via npm:
npm install union-form
Usage
Here is an example of how to use the UnionForm component in a React application:
import React, { useState } from 'react';
import { DynamicForm, FormFieldIdentifier } from 'union-form';
const App: React.FC = () => {
const [formState, setFormState] = useState({
firstName: 'Amin Najafi',
age: 36,
address: 'New York!',
logo: '',
});
const [validations, setValidations] = useState({});
const [isValid, setIsValid] = useState(false);
const fields = [
{
key: 'firstName',
identifier: FormFieldIdentifier.TEXT,
label: 'First Name',
preemptWidth: 6,
locale: {
en: { message: 'First Name' },
fa: { message: 'نام' },
},
rules: [
{
criteria: { $ne: 'Bye' },
message: 'First name must not be Bye!',
},
(v) => v === 'Hello' || 'First name must be Hello!',
],
},
{
key: 'lastName',
identifier: FormFieldIdentifier.TEXT,
label: 'Last Name',
preemptWidth: 6,
locale: {
en: { message: 'Last Name' },
fa: { message: 'نام خانوادگی' },
},
},
{
key: 'logo',
identifier: FormFieldIdentifier.FILE,
label: 'Logo',
url: 'http://localhost:8080/api/v1/media',
locale: {
en: { message: 'Logo' },
fa: { message: 'لوگو' },
},
},
// Add other fields as necessary
];
return (
<UnionForm
target={formState}
fields={fields}
onUpdateValidations={setValidations}
onUpdateIsValid={setIsValid}
locale="fa" // Change to "en" for English
/>
);
};
export default App;