# React Fields

<figure><img src="/files/jEOT1nXamo9ddQGs8hVH" alt="" width="198"><figcaption><p>Selecting a custom component to add</p></figcaption></figure>

### Setting up a custom Feathery field

If you're on Feathery's growth or business plan, go to your account settings, and then click the **Custom Fields** tab. Specify the following information

1. Custom Field Name: user-friendly label for your custom field
2. Custom Field Type: internal, unique identifier for your custom field type
3. Custom Field Icon: URL to icon (preferably SVG) to use in the form designer for your custom field
4. Custom Field code: React component code to render your custom field

Your account and child workspaces (if on our white label plan) will subsequently have access to the custom field element that they can drag onto and use within their forms.

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

{% code overflow="wrap" %}

```jsx
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;
```

{% endcode %}

### 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
* `fieldProperties`: Object
  * `required`: Boolean
  * `disabled`: Boolean
* `formContext`: Object
  * `rightToLeft`: Boolean - The form's RTL writing mode setting
  * `editMode`: Boolean - Is true when inside the form builder and false when a user is filling the form.

### 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`

```jsx
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;
```

<figure><img src="/files/T2gaMZrtVipat0g7vMyq" alt="" width="375"><figcaption><p>Custom Color Picker component</p></figcaption></figure>

### Current Limitations

Please note the following limitations:

* Style properties inside the designer are not currently supported
* Component must be self-contained in a single file
* Component cannot use Typescript

These limitations will be updated in the near future.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.feathery.io/platform/build-forms/elements/custom-fields/react-fields.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.