Overview

feathery-react is a library you can use to render a Feathery form anywhere in your React app or website. It also supports granular customization of your form components, design, and validation.

What you need#

  • An active Feathery account, form, and API key

Installation#

You can install feathery-react directly from NPM.

npm install feathery-react

Feathery React is compatible with React 16.8+ (the one with React Hooks).

Quickstart Example#

The following is a React component that renders a Feathery form. Make sure to replace APIKey and formKey with your relevant info.

import { Feathery } from 'feathery-react';
function App() {
// Initialize Feathery
Feathery.init('<APIKey>');
// Show the `onboarding` Feathery form
return <Feathery.Form formKey='<formKey>' />
}

API Guide#

Feathery.init#

Async function that initializes the Feathery library to the correct auth and user info. This is necessary before using the rest of the API and can be called multiple times, although it will register as a no-op after the first call.

ParameterTypeDescription
apiKeystringAdmin or user API key to authorize the client to communicate with Feathery servers. If it's a user API key, no need to pass userKey to init.
optionsoptional objectConfiguration options for your Feathery forms

options Parameters#

ParameterTypeDescription
userKeystringUnique ID of the user who is accessing Feathery. This can be anything as long as it's unique per user. If not specified, Feathery autogenerates the user ID.
formKeysarrayArray of IDs corresponding to forms that you want to preload at initialization. This can improve form load performance. The firebase global object is accessible after pre-loading a form with Firebase activated.
trackingenum {'fingerprint', 'cookie'}Defaults to fingerprint. Affects the way Feathery generates and tracks user IDs. Cookies can be cleared but fingerprints are permanent.
authIdstringThe user's authentication token. Setting this denotes the user as logged in.

<Feathery.Form>#

Initialize this component in your React app at the location where you want a Feathery form to appear. It renders an HTML form element.

PropTypeDescription
formKeystringUnique ID of your Feathery form to display. It can be found on your dashboard.
onSubmitoptional functionCallback function upon successful step submission attempt. Full reference
onLoadoptional functionCallback function upon loading of each form step. Full reference
onChangeoptional functionCallback function upon a field value changing. Full reference
initialValuesoptional objectInitial form field values of the shape {<fieldKey>: <fieldValue>}. If not passed in, Feathery will generate default initial values as necessary.
childrenoptional JSX elementsCustom components that you want to render in your form. Full reference
classNameoptional stringYour custom CSS class(es) to associate with your form element.
styleoptional objectYour custom inline CSS styling to associate with your form element.