createInstance - Setup

To use the library, first create an instance of your form components using the createInstance method. You only need to do this once for your entire application. The instance will be configured with the custom components you define.

Register Custom Field Components

import { createInstance } from "react-geek-form";

// Example Custom Field Components
const CustomInput = ({ value, onChange, error }) => (
  <input value={value} onChange={(e) => onChange(e.target.value)} />
);

const CustomTextarea = ({ value, onChange, error }) => (
  <textarea value={value} onChange={(e) => onChange(e.target.value)} />
);

// Create the instance with Custom Field Components
const { createForm } = createInstance({
  CustomInput,
  CustomTextarea,
  ...[Custom Fields Components]
});

// Export createForm for reuse across your app
export { createForm };

Creating Custom Field Components

To register a custom field component, ensure that it meets the following criteria:

Must have a value prop.

value: any;

Must have an onChange prop defined as follows:

onChange: (value: any) => void;

An optional error prop may be included. If defined, it must adhere to this structure:

error: {
  message: string;
}

Example Custom Field Component

type Props = {
  onChange: (value: string) => void;
  value: string;
  error?: {
    message: string;
  };
};

const CustomInput = ({ value, onChange, error }: Props) => {
  return (
    <div>
      <input value={value} onChange={(e) => onChange(e.target.value)} />
      {error && <span>{error.message}</span>}
    </div>
  );
};

export default CustomInput;