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


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 { init, Form } from 'feathery-react';
function App() {
// Initialize Feathery
// Show the `onboarding` Feathery form
return <Form formKey='<formKey>' />

API Guide#


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.

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#

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 and will track their authenticated account information.


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

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
onSkipoptional functionCallback function upon skipping a step. Full reference
onLoadoptional functionCallback function upon loading of each form step. Full reference
onErroroptional functionCallback function upon an error occurring in the form. Full reference
onChangeoptional functionCallback function upon a field value changing. Full reference
onCustomActionoptional functionCallback function triggered when the user clicks a button configured to perform a custom action. Full reference
initialValuesoptional objectInitial form field values of the shape {<fieldKey>: <fieldValue>}. If not passed in, Feathery will generate default initial values as necessary.
initialStepIdoptional stringIf specified, this will be the first step your user sees.
elementPropsoptional objectOverride specific form element props by passing in a map from element ID to an object of custom props to be applied to that element. E.g., you can hide a field by passing in {<fieldID> : {style: {visibility: 'hidden'}}}.
usePreviousUserDataoptional booleanIf true and a user has filled out any fields in this form previously, the information will be "remembered" and show the next time they visit the form. Defaults to true.
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.


Function that updates the ID of the user in the current session to the value specified. This value must be unique and will throw an error otherwise.

newUserKeystringNew value to update the user ID to