CoreLab UI logoCoreLab UI logo

Introduction

Revolutionize your React applications with the FormFusion, thoughtfully designed by CoreLab UI. This broad library offers an efficient solution for managing forms, complete with built-in validation, exceptional accessibility, and unparalleled customization capabilities. Optimize your development process and elevate the user experience with ease, as you harness the full potential of JavaScript forms in your React applications.

Our library seamlessly integrates with popular design frameworks including Material UI, Ant Design, Chakra UI, and Reactstrap, making it the perfect choice for your React-based projects.


FormFusion leverages the native HTML form validation by extending the list of native input types and provides a large collection of thoroughly tested and ready to use validation rules such as:

  • length

  • minCharacters

  • maxCharacters

  • charactersRange

  • numberOfLetters

  • minLetters

  • maxLetters

  • lettersRange

  • contains

  • equals

  • startsWith

  • endsWith

  • existIn

  • notExistIn

  • numeric

  • alphabetic

See full list here
 

Features

  • Efficiency: Optimize your form - handling process with this powerful, lightweight library.

  • Adaptability: Easily integrate FormFusion into new or existing projects.

  • Out-of-the-Box Validation: Use the built -in validation rules without hassle.

  • Customizable: Tailor the UI to your specific needs and preferences.

  • No dependencies: FormFusion is self - contained and does not rely on any external dependencies.

Installation

To get started with our library, simply install it using npm or yarn with the following command:


Example

Below is an example of how FormFusion simplifies the creation of an uncontrolled payment form with a card number and ccv validation:


import { Form, Input } from 'formfusion';
import './App.css';

const MyForm = () => {
  const onSubmit = (data: object) => {
    console.log('Form submitted successfully', data);
  };

  return (
    <Form onSubmit={onSubmit} validateOnChange className="form">
      <h1>Simple payment form</h1>
      <Input
        id="credit-card-number"
        name="credit-card-number"
        type="credit-card-number-basic"
        label="Credit card number"
        placeholder="Enter your credit card number"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <Input
        id="ccv"
        name="ccv"
        type="ccv"
        label="CCV"
        placeholder="Enter your ccv number"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <Input
        id="expiry-date"
        name="expiry-date"
        type="date"
        label="Expiry date"
        required
        classes={{
          field: 'form__input-field',
          error: 'form__input-field__error',
          label: 'form__input-field__label',
        }}
      />
      <button type="submit">Submit</button>
    </Form>
  );
};

export default MyForm;


Preview

Simple payment form