feathery-react is a small React 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.


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

API Guide#


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.

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. May result in better form load performance.
trackingenum {'fingerprint', 'cookie'}Defaults to fingerprint. Affects the way Feathery generates and tracks user IDs. Cookies can be cleared but fingerprints are permanent.


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