Creating Plugins

import type { BetterFormPlugin } from '@better_form/core';
 
const myPlugin: BetterFormPlugin = {
  name: 'my-plugin',
  version: '1.0.0',
  fieldComponents: {
    'custom-field': CustomFieldComponent,
  },
  fieldTypes: ['custom-field'],
  init: async () => {
    // Optional: Initialize plugin (load scripts, etc.)
  },
};

// my-plugin.ts
import type { BetterFormPlugin, FieldComponentProps } from '@better_form/core';
 
function MyCustomField({ field, value, onChange, error }: FieldComponentProps) {
  return (
    <div>
      <label>{field.label}</label>
      <input
        value={value as string}
        onChange={(e) => onChange(e.target.value)}
      />
      {error && <span>{error}</span>}
    </div>
  );
}
 
export function myPlugin(config?: { option: string }): BetterFormPlugin {
  return {
    name: 'my-plugin',
    version: '1.0.0',
    fieldComponents: {
      'my-custom': MyCustomField,
    },
    fieldTypes: ['my-custom'],
  };
}

import { WizardProvider, defaultFieldComponents } from '@better_form/core';
import { myPlugin } from './my-plugin';
 
const plugin = myPlugin({ option: 'value' });
 
const fieldComponents = {
  ...defaultFieldComponents,
  ...plugin.fieldComponents,
};
 
<WizardProvider config={config} fieldComponents={fieldComponents}>
  <WizardContainer />
</WizardProvider>

import { createPlugin, mergePlugins } from '@better_form/core/plugins';
 
// Simple plugin creation
const simplePlugin = createPlugin('simple', '1.0.0', {
  'simple-field': SimpleFieldComponent,
});
 
// Merge multiple plugins
const allComponents = mergePlugins(pluginA, pluginB, pluginC);

{
  "name": "@better_form/plugin-yourname",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "peerDependencies": {
    "@better_form/core": "^0.2.0",
    "react": "^18.0.0 || ^19.0.0"
  }
}