@bigbinary/neeto-form-engine-frontend

neetoFormEngine-frontend is the library that manages forms across neeto products.

Installation

yarn add @bigbinary/neeto-form-engine-frontend

neetoFormEngine-frontend has a few peer dependencies that are required for the proper functioning of the package. Install all the peer dependencies using the below command:

yarn add @bigbinary/neetoui @bigbinary/neeto-icons ramda@^0.28.0 classnames@^2.3.1 [email protected]

Import stylesheet from the following location:

@import "@bigbinary/neeto-form-engine-frontend/dist/main.css";

Add NeetoFormProvider to the root of your application:

import React from "react";

import { NeetoFormProvider } from "@bigbinary/neeto-form-engine-frontend";

const App = () => {
  return (
    <>
      <NeetoFormProvider>{/* Other children */}</NeetoFormProvider>
    </>
  );
};

Components

BuildForm component is used to render a form builder.

import { BuildForm } from "@bigbinary/neeto-form-engine-frontend";

| prop | type | description | | ------------------------ | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | isEmbedded | boolean | To apply styles for embedding | | id | string | Form id | | onUpdate | function | Callback for form update | | buildRequestArgs | object | Arguments for build request | | showAddQuestionDivider | boolean | To show add question divider | | nonRemovableFields | string[] | Field kinds that cant be deleted from a form. Accepts array of kinds: name, email, phone, rating, checkbox, dropdown | | submitButtonProps | object | Props for submit button | | cancelButtonProps | object | Props for cancel button | | requiredFields | string[] | Fields that are required. Provided fields will be treated as required by default in the External form, the checkbox for toggling required will be hidden for the fields. Accepts array of kinds: name, email, phone, rating, checkbox, dropdown |

ExternalForm component is used to render a form.

import { ExternalForm } from "@bigbinary/neeto-form-engine-frontend";

| prop | type | description | | --------------------- | ----------------- | ---------------------------------------------------------------------- | | formId | string | Form id | | customSubmitHandler | function | Custom submit handler to be called instead of internal submit handlers | | onBeforeSubmit | function | Callback for before form submit | | onCreateSuccess | function | Callback for form creation success | | showTitle | boolean | To show form title | | submitRequestArgs | object | Arguments for form submit request payload | | footer | React.Component | To render a Footer Component | | submitButtonProps | object | Props for submit button | | cancelButtonProps | object | Props for cancel button | | resetButtonProps | object | Props for reset button | | showPrefixIcons | boolean | To show prefix icons in input fields | | displayThankYou | boolean | To show thank you message after form submit | | className | string | To apply custom class to the form wrapper | | submissionId | string | To set submission id for updating the form | | preview | boolean | To show form in preview mode | | preserveValues | boolean | To preserve form values in localStorage | | formTitle | string | To set form title | | titleProps | object | To set props for form title | | clearValuesOnSubmit | boolean | To clear local storage values on submit | | clearValuesOnReset | boolean | To clear local storage values on reset | | formDomProps | object | To set props for form element |

Submission component is used to render a form result.

import { Submission } from "@bigbinary/neeto-form-engine-frontend";

| prop | type | description | | -------------------- | -------- | --------------------------------------- | | formId | string | Form id | | submissionId | string | Submission id | | className | string | To apply custom class component wrapper | | questionLabelProps | object | To override props for question label | | answerProps | object | To override props for answer text |

Hooks

useBuildFormState hook is used to get the form state.

import {
  useBuildFormState,
  BuildForm,
} from "@bigbinary/neeto-form-engine-frontend";

const FormBuilder = () => {
  const {
    values,
    dirty,
    isSubmitting,
    isValid,
    submitForm,
    resetForm,
    errors,
  } = useBuildFormState();

  return <BuildForm />;
};

useFormSubmission hook is used to fetch the form submission data.

import { useFormSubmission } from "@bigbinary/neeto-form-engine-frontend";

const Component = () => {
  const { submission, isLoading } = useFormSubmission({
    formId: "form-id",
    submissionId: "submission-id",
  });

  return <></>;
};

Development

Install all the dependencies by executing the following command

yarn install

Building

The neetoFormEngine-frontend package gets auto-published to npm for every new merge to the main branch. You can checkout the publish workflow in git actions to get a live update.

Used in

• neetoCal
• neetoCRM