@schema-formx/react

React adapter for Schema FormX — a declarative form solution for multiple frameworks.

Installation

npm install @schema-formx/react @schema-formx/core lodash-es
# or
pnpm add @schema-formx/react @schema-formx/core lodash-es

Quick Start

import { Form } from '@schema-formx/react'
import type { Components, FieldSchema } from '@schema-formx/react'

const MyInput = ({ value, onChange, ...props }) => (
  <input value={value ?? ''} onChange={(e) => onChange(e.target.value)} {...props} />
)

const components: Components = {
  DefaultControl: MyInput,
}

const schema: FieldSchema[] = [
  { name: 'username', label: 'Username', type: 'string', required: true },
  { name: 'email', label: 'Email', type: 'string' },
]

function App() {
  return (
    <Form
      components={components}
      schema={schema}
      layout={{}}
      onChange={({ data, name, value }) => console.log(name, value)}
    />
  )
}

API

<Form />

| Prop | Type | Description | |------|------|-------------| | components | Components | Component registry (DefaultControl required) | | schema | FieldSchema[] \| GroupSchema[] | Form field definitions | | layout | Layout<CSSProperties> | Layout/style configuration | | data | Record<string, unknown> | Controlled form data | | defaultData | Record<string, unknown> | Default form data | | onChange | OnChange | Callback on field value change | | validationOptions | ValidationOptions | Validation configuration |

See API Documentation for details.

License

MIT