# Framework packages reference

Every public function, class and type, as published at version `0.1.0-alpha.7`. The [JavaScript SDK](/guides/javascript-sdk/) page has the overview and examples.

Each package is a thin layer over [`@formerie/client`](/guides/sdk-reference/), so its types, such as `FormerieTarget`, are in the client reference.

## React

`@formerie/react`

### React: useFormerieClient

A `FormerieRuntimeClient` for a component.

```ts
function useFormerieClient(config?: FormerieClientConfig): FormerieClient;
```

### React: useFormerieSubmit

Submits to a target, tracks the status and result, and can also check answers and read the schema.

```ts
function useFormerieSubmit(target: FormerieTarget, config?: FormerieClientConfig): UseFormerieSubmitResult;
```

### React: FormerieSubmitState

```ts
interface FormerieSubmitState {
    status: FormerieSubmitStatus;
    result: SubmitResponse | null;
}
```

### React: FormerieSubmitStatus

```ts
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";
```

### React: UseFormerieSubmitResult

```ts
interface UseFormerieSubmitResult {
    client: FormerieClient;
    state: FormerieSubmitState;
    isSubmitting: boolean;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}
```

## Vue

`@formerie/vue`

### Vue: useFormerieClient

A `FormerieRuntimeClient` as a computed ref.

```ts
function useFormerieClient(config?: MaybeRef<FormerieClientConfig>): ComputedRef<FormerieClient>;
```

### Vue: useFormerieSubmit

Submits to a target and tracks the status and result in refs. It can also check answers and read the schema.

```ts
function useFormerieSubmit(target: MaybeRef<FormerieTarget>, config?: MaybeRef<FormerieClientConfig>): UseFormerieSubmitResult;
```

### Vue: FormerieSubmitStatus

```ts
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";
```

### Vue: UseFormerieSubmitResult

```ts
interface UseFormerieSubmitResult {
    client: ComputedRef<FormerieClient>;
    status: Ref<FormerieSubmitStatus>;
    result: ShallowRef<SubmitResponse | null>;
    isSubmitting: ComputedRef<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}
```

## Svelte

`@formerie/svelte`

### Svelte: createFormerieClient

A `FormerieRuntimeClient`.

```ts
function createFormerieClient(config?: FormerieClientConfig): FormerieClient;
```

### Svelte: createFormerieRenderModel

A store of the fields and steps to draw, which follows the schema and answers.

```ts
function createFormerieRenderModel(schema: FormerieReadableInput<PublicSchemaInput>, values?: FormerieReadableInput<Record<string, unknown>>, options?: FormerieReadableInput<DescribeFormerieRenderModelOptions>): Readable<FormerieRenderModel>;
```

### Svelte: createFormerieSubmit

Submits to a target and tracks the status and result in stores. It can also check answers and read the schema.

```ts
function createFormerieSubmit(target: FormerieTarget, config?: FormerieClientConfig): FormerieSubmitStore;
```

### Svelte: FormerieReadableInput

```ts
type FormerieReadableInput<T> = T | Readable<T>;
```

### Svelte: FormerieSubmitStatus

```ts
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";
```

### Svelte: FormerieSubmitStore

```ts
interface FormerieSubmitStore {
    client: FormerieClient;
    status: Writable<FormerieSubmitStatus>;
    result: Writable<SubmitResponse | null>;
    isSubmitting: Readable<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}
```

## Solid

`@formerie/solid`

### Solid: createFormerieClient

A `FormerieRuntimeClient` as an accessor.

```ts
function createFormerieClient(config?: MaybeAccessor<FormerieClientConfig>): Accessor<FormerieClient>;
```

### Solid: createFormerieSubmit

Submits to a target and tracks the status and result in accessors. It can also check answers and read the schema.

```ts
function createFormerieSubmit(target: MaybeAccessor<FormerieTarget>, config?: MaybeAccessor<FormerieClientConfig>): CreateFormerieSubmitResult;
```

### Solid: CreateFormerieSubmitResult

```ts
interface CreateFormerieSubmitResult {
    client: Accessor<FormerieClient>;
    status: Accessor<FormerieSubmitStatus>;
    result: Accessor<SubmitResponse | null>;
    isSubmitting: Accessor<boolean>;
    submit: (payload: SubmitPayload, options?: SubmitRequestOptions) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    reset: () => void;
}
```

### Solid: FormerieSubmitStatus

```ts
type FormerieSubmitStatus = "idle" | "submitting" | "success" | "error";
```

### Solid: MaybeAccessor

```ts
type MaybeAccessor<T> = T | Accessor<T>;
```

## Angular

`@formerie/angular`

### Angular: FORMERIE_CLIENT_CONFIG

The injection token for the client's settings. Optional.

```ts
const FORMERIE_CLIENT_CONFIG: InjectionToken<FormerieClientConfig>;
```

### Angular: FormerieService

An injectable service that reads the schema, checks answers and submits, for a target. `getClient()` returns a `FormerieRuntimeClient`.

```ts
class FormerieService {
    getClient(): FormerieClient;
    submit(target: FormerieTarget, payload: SubmitPayload, options?: SubmitRequestOptions): Promise<SubmitResponse>;
    validate(target: FormerieTarget, payload: ValidatePayload, options?: SubmitRequestOptions): Promise<ValidateResponse>;
    schema(target: FormerieTarget, options?: SubmitRequestOptions): Promise<PublicFormSchemaResult>;
}
```

## Astro

`@formerie/astro`

### Astro: createFormerieClient

A `FormerieRuntimeClient`.

```ts
function createFormerieClient(config?: FormerieClientConfig): FormerieClient;
```

### Astro: createFormerieFormAttributes

The `data-formerie-*` attributes for a `<form>`, with its target's addresses.

```ts
function createFormerieFormAttributes(target: FormerieTarget, options?: FormerieAstroFormAttributesOptions): Record<string, string>;
```

### Astro: FormerieAstroFormAttributesOptions

```ts
interface FormerieAstroFormAttributesOptions {
    endpoint?: string;
    includeSchemaUrl?: boolean;
    includeValidateUrl?: boolean;
}
```

## Next

`@formerie/next`

### Next: createFormerieNextAction

A server action that submits `FormData` to a target. See [the server path](/guides/framework-entry-points/#limits-on-the-server-path) for its limits.

```ts
function createFormerieNextAction(target: FormerieTarget, options?: CreateFormerieNextActionOptions): (formData: FormData) => Promise<SubmitResponse>;
```

### Next: createFormerieNextServerHelpers

The client, schema and validate calls, and a submit action, for one target.

```ts
function createFormerieNextServerHelpers(target: FormerieTarget, options?: CreateFormerieNextActionOptions): FormerieNextServerHelpers;
```

### Next: CreateFormerieNextActionOptions

```ts
interface CreateFormerieNextActionOptions {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    submitOptions?: SubmitRequestOptions;
}
```

### Next: FormerieNextServerHelpers

```ts
interface FormerieNextServerHelpers {
    client: FormerieClient;
    schema: (options?: SubmitRequestOptions) => Promise<PublicFormSchemaResult>;
    submitAction: (formData: FormData) => Promise<SubmitResponse>;
    validate: (payload: ValidatePayload, options?: SubmitRequestOptions) => Promise<ValidateResponse>;
}
```

### Next: FormerieSubmitState

The same as in `@formerie/react`, re-exported.

### Next: FormerieSubmitStatus

The same as in `@formerie/react`, re-exported.

### Next: useFormerieClient

The same as in `@formerie/react`, re-exported.

### Next: useFormerieSubmit

The same as in `@formerie/react`, re-exported.

### Next: UseFormerieSubmitResult

The same as in `@formerie/react`, re-exported.

## Nuxt

`@formerie/nuxt`

### Nuxt: createFormerieNuxtClient

A `FormerieRuntimeClient`, with its address from your Nuxt runtime config.

```ts
function createFormerieNuxtClient(runtimeConfig?: FormerieNuxtRuntimeConfig, config?: FormerieClientConfig): FormerieClient;
```

### Nuxt: createFormerieNuxtSubmitHandler

A server handler that submits the form data your `readFormData` returns to a target.

```ts
function createFormerieNuxtSubmitHandler<Event = unknown>(target: FormerieTarget, options: CreateFormerieNuxtSubmitHandlerOptions<Event>): (event: Event) => Promise<SubmitResponse>;
```

### Nuxt: CreateFormerieNuxtSubmitHandlerOptions

```ts
interface CreateFormerieNuxtSubmitHandlerOptions<Event = unknown> {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    readFormData: (event: Event) => Promise<FormData> | FormData;
    submitOptions?: SubmitRequestOptions;
}
```

### Nuxt: FormerieNuxtRuntimeConfig

```ts
interface FormerieNuxtRuntimeConfig {
    formerie?: {
        endpoint?: string;
    };
    public?: {
        formerie?: {
            endpoint?: string;
        };
    };
}
```

### Nuxt: FormerieSubmitStatus

The same as in `@formerie/vue`, re-exported.

### Nuxt: useFormerieClient

The same as in `@formerie/vue`, re-exported.

### Nuxt: useFormerieSubmit

The same as in `@formerie/vue`, re-exported.

### Nuxt: UseFormerieSubmitResult

The same as in `@formerie/vue`, re-exported.

## Remix

`@formerie/remix`

### Remix: createFormerieRemixAction

A Remix action that submits the request's form data to a target.

```ts
function createFormerieRemixAction(target: FormerieTarget, options?: CreateFormerieRemixActionOptions): (args: FormerieRemixActionArgs) => Promise<Response>;
```

### Remix: jsonFormerieRemixResponse

A JSON `Response` from a submit result, with HTTP `202` on success and `400` on failure unless you set them.

```ts
function jsonFormerieRemixResponse(result: SubmitResponse, options?: Pick<CreateFormerieRemixActionOptions, "errorStatus" | "successStatus">): Response;
```

### Remix: CreateFormerieRemixActionOptions

```ts
interface CreateFormerieRemixActionOptions {
    client?: FormerieClient;
    clientConfig?: FormerieClientConfig;
    errorStatus?: number;
    payloadOptions?: CreateFormerieSubmitPayloadOptions;
    submitOptions?: SubmitRequestOptions;
    successStatus?: number;
}
```

### Remix: FormerieRemixActionArgs

```ts
interface FormerieRemixActionArgs {
    request: Request;
}
```

### Remix: FormerieSubmitState

The same as in `@formerie/react`, re-exported.

### Remix: FormerieSubmitStatus

The same as in `@formerie/react`, re-exported.

### Remix: useFormerieClient

The same as in `@formerie/react`, re-exported.

### Remix: useFormerieSubmit

The same as in `@formerie/react`, re-exported.

### Remix: UseFormerieSubmitResult

The same as in `@formerie/react`, re-exported.