@bigbinary/neeto-form-engine-frontend

@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 formik@2.2.9

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
requiredFieldKinds	string[]	Kinds that are required atleast once in a form. Accepts array of: 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
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 values in form

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

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 master branch. You can checkout the publish workflow in git actions to get a live update.