@bigbinary/neeto-form-frontend

@bigbinary/neeto-form-frontend

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

Installation

yarn add @bigbinary/neeto-form-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 formik@2.2.9

Import stylesheet from the following location:

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

Add NeetoFormProvider to the root of your application:

import React from "react";

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

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

Components

BuildForm component is used to render a form builder.

import { BuildForm } from "@bigbinary/neeto-form-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-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-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-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-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