Install

input-mapping

npm

npm i @form-instant/react-input-mapping

bun

bun add @form-instant/react-input-mapping

resolvers

zod

npm

npm i @form-instant/react-resolver-zod

bun

bun add @form-instant/react-resolver-zod

Example

react

constructor new InputMapping

* new Input Mapping

Is the pillar of this set of tools, it consists of an extraction of the native new Map method in javascript, which receives as a parameter an object which works as a mapping of the input types, it also accepts two types as a parameter P are the parameters that each input component will accept and K are additional keys that are added to the input glossary.

import {
  InputMapping
} from "@form-instant/react-input-mapping";

exprot type extendProps = React.InputHTMLAttributes<HTMLInputElement>;

export type P = Record<
  string,
  ParsedField<extendProps, string>
>;
export type K = "email" | "password" | "date";

export const inputMapping = new InputMapping<P, K>({
  fallback: (props) => {
    const { fieldConfig, ...prop } = props;

    return <input {...prop} {...fieldConfig} />;
  },
  textarea: () => <textarea />,
  number: () => <input type="number" />,
  text: (props) => {
    const { fieldConfig, ...prop } = props;

    return <input {...prop} {...fieldConfig} />;
  },
  date: () => <input type="date" />,
  email: (props) => {
    const { fieldConfig, ...prop } = props;

    return <input {...prop} {...fieldConfig} />;
  },
  password: (props) => {
    const { fieldConfig, ...prop } = props;

    return <input {...prop} {...fieldConfig} />;
  },
});

default keys glossary, all values ​​entered by k will only understand the default listing.

export type INPUT_COMPONENTS_KEYS =
    | 'checkbox'
    | 'date'
    | 'select'
    | 'radio'
    | 'switch'
    | 'textarea'
    | 'number'
    | 'file'
    | 'text'
    | 'fallback';

* create global provider

We created a global provider to be able to access input mapping.

import { createFormInstantContainer } from '@form-instant/react-input-mapping';
import { inputMapping, P, K } from './inputMapping.tsx';

export const { FormInstantInputsProvider, useInputMapping } = createFormInstantContainer<P, K>(
    inputMapping,
);

we add our provider in the root of the vite project "./App.tsx" and next.js "layout.tsx" in the root.

next.js

import { ReactNode } from "react";
import { FormInstantInputsProvider } from "./components/providers";

function Layout({ children }: { children: ReactNode }) {
  return (
    <FormInstantInputsProvider>
      {children}
    </FormInstantInputsProvider>
  );
}

export default Layout;

vite

import "./App.css";
import { Router } from "./router";
import { FormInstantInputsProvider } from "./components/providers";

function App() {
  return (
    <FormInstantInputsProvider>
      <Forms />
    </FormInstantInputsProvider>
  );
}

export default App;

* use resolver

To use our resolver we must instantiate the function to generate the fieldConfig.

import { createFormInstantContainer } from '@form-instant/react-input-mapping';
import { inputMapping, P, K, extendProps } from './inputMapping.tsx';

export const { FormInstantInputsProvider, useInputMapping } = createFormInstantContainer<P, K>(
    inputMapping,
);

export const fieldConfig = createZodSchemaFieldConfig<extendProps>();

* build form

• schema:

import { z } from 'zod';
import { fieldConfig } from './providers';

export const formSchema = z.object({
    security_data: z
        .object({
            email: z
                .string()
                .email()
                .superRefine(
                    fieldConfig({
                        fieldType: 'email',
                        placeholder: '[email protected]',
                    }),
                ),
            password: z.string().superRefine(
                fieldConfig({
                    type: 'password',
                    placeholder: '******',
                }),
            ),
            confirm: z.string(),
        })
        .refine(({ confirm, password }) => confirm !== password, {
            message: 'the confim password is diferent to password',
        }),

    personal_data: z.object({
        last_name: z.string().superRefine(
            fieldConfig({
                placeholder: 'select date',
            }),
        ),
        firse_name: z.string(),

        birthday: z.coerce.date().optional(),

        code: z.string(),
    }),
});

export type formSchemaType = Zod.infer<typeof formSchema>;

• component

import {
  FormInstantElement,
  FormInstantProvider,
} from "@form-instant/react-resolver-zod";
import { z } from "zod";
import { formSchema, formSchemaType } from "./schema";

export const Forms = () => {
  return (
    <form>
      <h1>your form</h1>
      <FormInstantProvider schema={formSchema}>
        <div>
          <FormInstantElement<formSchemaType> name="security_data" />
          <br />
          <FormInstantElement<formSchemaType> name="personal_data" />
        </div>
      </FormInstantProvider>

      <button type="submit">submit</button>
    </form>
  );
};