Extending

ReactFormSwitch has no plugin framework. Extension is three plain functions that register a value by name; you then use that name in a schema like any built-in.

Custom fields

registerField(type, Component) registers a headless, controlled field component. It receives value, onChange, onBlur, error, and the field spec — you own the markup:

import { registerField } from 'reactformswitch'

registerField('rating', ({ value, onChange }) => (
  <StarRating value={value as number} onChange={onChange} />
))

// then use it by name
{ name: 'score', type: 'rating', label: 'Rating' }

Companion helpers: hasField(type) and getField(type). See FieldProps for the full props a field receives.

Custom serializers

registerSerializer(name, fn) maps a payload name to a function over the raw values. It may be async (built-in json/xml are, because they read image Files):

import { registerSerializer } from 'reactformswitch'

registerSerializer('csv', (values) => Object.values(values).join(','))

// then select it as the payload
schema={{ payload: 'csv', fields: [/* ... */] }}

serialize(name, values) runs a registered serializer directly if you need the payload outside a form.

Custom themes

defineTheme(...tokenObjects) merges --fs-* token objects into one you can pass as theme:

import { defineTheme, light } from 'reactformswitch'

const brand = defineTheme(light, { '--fs-color-primary': '#e11d48' })