@bigbinary/neeto-form-engine-frontend NPM

@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
`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.