Custom JSX Components

Embed custom JSX components into your Feathery form.

Overview

Include custom JSX components in your Feathery form by passing them as part of the customComponents prop or directly as React children. You can add custom HTML, JS, and iframes directly from the editor.

customComponents

Pass your JSX components as a mapping to the customComponents prop if you'd like them to be placed in specific containers on specific steps. The key of the mapping is the container ID, and the value is the component itself. If the specified container exists, your component will be appended to any children that already exists within it.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', '[e-mail]');

  // Show the `onboarding` Feathery form
  return (
    <Form 
      formName='onboarding'
      customComponents={{ 'container-id': <MyAnimation /> }}
    />
  );
}

children

Pass your components as children if you'd like them to be absolutely positioned and available across every step. You might want to inject custom components like animations, dynamic data, and more.

import { init, Form } from '@feathery/react';

function App() {
  // Initialize Feathery
  init('SDKKey', '[e-mail]');

  // Show the `onboarding` Feathery form
  return (
    <Form formName='onboarding'>
      <MyAnimation />
    </Form>
  );
}