Bring your own Feathery field

Customize your forms with your own components written in React.

Custom Color Picker component

Custom Fields are in beta. The information on this page is subject to change as development continues.

Adding a Custom Field

1. From the elements panel, drag the "Custom Field" element onto your form

2. In the code editor that appears, paste your React component code

Component Requirements

Your custom component must follow these requirements to work properly:

• Must be exported as the default export

• Must accept and handle value and onChange props

• Must be a valid React component

Example Component

import React from 'react';

const Counter = ({ value = 0, onChange }) => {
  const handleClick = () => {
    onChange(value + 1); // Increments the current value
  };

  return (
    <div>
      <p>Current value: {value}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default Counter;

Props

Your component will receive these props:

• value: The current value of the field. Can be a valid json value or object

• onChange: Function to update the field's value

  • Accepts one parameter: the new value

  • Updates the form state automatically

Using NPM Packages

You can import and use npm packages in your custom component. Here's a more complex example using the react library react-colorful

import React from 'react';
import { HexColorPicker } from 'react-colorful';

const ColorPicker = ({ value = '#4287f5', onChange }) => {
  function getContrastTextColor(hexBackground) {
    // Remove # if present
    const hex = hexBackground.replace('#', '');

    // Convert hex to RGB
    const r = parseInt(hex.slice(0, 2), 16);
    const g = parseInt(hex.slice(2, 4), 16);
    const b = parseInt(hex.slice(4, 6), 16);

    // Calculate luminance using WCAG formula
    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;

    return luminance > 0.5 ? '#000000' : '#ffffff';
  }

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        gap: '20px',
        padding: '20px',
        maxWidth: '400px',
        margin: '0 auto'
      }}
    >
      <HexColorPicker color={value} onChange={onChange} />
      <div
        style={{
          padding: '20px',
          borderRadius: '8px',
          backgroundColor: value,
          color: getContrastTextColor(value),
          textAlign: 'center',
          transition: 'all 0.3s ease'
        }}
      >
        {value}
      </div>
    </div>
  );
};

export default ColorPicker;

Current Limitations

Please note the following limitations:

• Style properties inside the designer are not currently supported

• Custom properties cannot be configured through the form builder interface

• Component must be self-contained in a single file

• Component cannot use Typescript

These limitations will be updated in the near future.