React SDK

Skip past table of contents

Search

Table of contents

Start of documentation content

The Formally React SDK allows developers to make bespoke customisations such as,

  • creating forms in code with JSX (ie, <Text id="myId" />)
  • custom form submit handler to send data to your own servers (data sovereignty)
  • replacing default components, such as textboxes, with your components (useful if you already have a design system)
  • custom validation logic
  • custom conditional logic for displaying parts of forms
  • custom file upload handler to send file uploads to your own servers (data sovereignty)
  • custom autosuggest handler to integrate with your APIs / data (data sovereignty)
  • custom analytics

All of these features can be used independently.

Install

The SDK software is included in the same NPM formally package.

Licensing via the licence prop

You can trial the SDK locally (on localhost) without a licence but deploying to another domain will require an SDK licence.

The licence is a string that is provided through the licence prop e.g.

An SDK licence is not required if only using the formBuilderId prop to load forms from GetFormally.com servers via the form builder. Use of other features via props including JSX usage will need an SDK licence.

JSX

import { Formally } from 'formally';
import 'formally/build/styles.min.css';

export const MyForm = () => (
  <Formally licence="your-licence-id" formBuilderId="your-form-id" />
);

JSX constraints

When using Formally JSX Components to author forms these Components must not be displayed conditionally. Instead, use the <Logic> or the Custom Logic.

Storing unsubmitted answers in storage

Formally saves unsubmitted answers in browser storage (localStorage).

Answers will be saved automatically if you're using "formBuilderId" however if you're designing forms using the data prop or JSX form components then to use this feature you'll need to provide a formCacheKey prop.

Provide a formCacheKey prop with a value that is unique to your form (ie, formCacheKey="dog-form"). This will be used for a localStorage key.

Or if you wish to disable this feature use formCacheKey={false}.