@needfull/forms-react

React components and hooks for @needfull/forms-core that provide seamless integration with Mantine UI.

Installation

npm install @needfull/forms-react @needfull/forms-core @mantine/core @mantine/dates @mantine/hooks @mantine/form

Usage

Basic Form Rendering

import { FormRenderer, FormBuilder } from '@needfull/forms-react';

// Create a form configuration
const formConfig = new FormBuilder('Contact Form', 'Please fill out your details')
  .addShortText('Full Name', true, 2, 50)
  .addEmail('Email Address', true)
  .addPhone('Phone Number', false)
  .build();

// Render the form
function MyForm() {
  const { form, submitForm } = useForms({ formConfig });

  const handleSubmit = (values) => {
    console.log('Form submitted:', values);
  };

  return (
    <div>
      <FormRenderer formConfig={formConfig} form={form} />
      <button onClick={() => submitForm(handleSubmit)}>Submit</button>
    </div>
  );
}

Using the useForms Hook

import { useForms } from '@needfull/forms-react';

function ContactForm() {
  const formConfig = new FormBuilder('Contact Form')
    .addShortText('name', true)
    .addEmail('email', true)
    .build();

  const { form, submitForm, resetForm, isValid } = useForms({
    formConfig,
    initialValues: { name: '', email: '' },
    validateOnChange: true
  });

  return (
    <div>
      <FormRenderer formConfig={formConfig} form={form} />

      <button
        onClick={() => submitForm((values) => console.log(values))}
        disabled={!isValid}
      >
        Submit
      </button>

      <button onClick={resetForm}>Reset</button>
    </div>
  );
}

Using the useFormBuilder Hook

import { useFormBuilder } from '@needfull/forms-react';

function DynamicFormBuilder() {
  const { addField, build } = useFormBuilder('My Form', 'Form description');

  const handleAddTextField = () => {
    addField({
      type: 'SHORT_TEXT',
      title: 'Text Field',
      is_required: true,
      min: 5,
      max: 100
    });
  };

  const formConfig = build();

  return (
    <div>
      <button onClick={handleAddTextField}>Add Text Field</button>
      {/* Render form with formConfig */}
    </div>
  );
}

Components

FormRenderer

Renders a form based on a FormConfig using Mantine UI components.

Props:

• formConfig: FormConfig - The form configuration
• form: any - Mantine form instance (from useForms hook)

Hooks

useForms

Integrates @needfull/forms-core validation with Mantine forms.

Parameters:

• options.formConfig?: FormConfig - Form configuration
• options.initialValues?: Record<string, any> - Initial form values
• options.validateOnChange?: boolean - Enable validation on change

Returns:

• form: any - Mantine form instance
• submitForm: (onSuccess?: (values) => void) => void - Submit handler
• resetForm: () => void - Reset form handler
• isValid: boolean - Form validation status

useFormBuilder

Provides form building functionality.

Parameters:

• title?: string - Form title
• description?: string - Form description

Returns:

• builder: FormBuilder - FormBuilder instance
• addField: (fieldData) => FormBuilder - Add field method
• build: () => FormConfig - Build form configuration

Peer Dependencies

• @mantine/core: ^6.0.0
• @mantine/dates: ^6.0.0
• @mantine/hooks: ^6.0.0
• @mantine/form: ^8.0.0
• react: ^19.0.0
• react-dom: ^19.0.0

License

ISC