react-hook-form-jsonschema-builder

use jsonschema Dynamic form for react-hook-form

Install

pnpm add react-hook-form-jsonschema-builder
# or
yarn add react-hook-form-jsonschema-builder
# or
npm i react-hook-form-jsonschema-builder

Usage

simple

import FormRender, { useForm } from "react-hook-form-jsonschema-builder";
import { Input, Checkbox, Radio } from "antd";

const schema = [
  {
    field: "name",
    component: "input",
    componentProps: {
      addonBefore: "http://",
    },
  },
  {
    field: "age",
    component: "checkbox",
    componentProps: {
      options: [
        { label: "Apple", value: "Apple" },
        { label: "Pear", value: "Pear" },
        { label: "Orange", value: "Orange" },
      ],
    },
  },
  {
    field: "work",
    component: "radio",
    componentProps: {
      options: [
        { label: "Apple", value: "Apple" },
        { label: "Pear", value: "Pear" },
        { label: "Orange", value: "Orange" },
      ],
    },
  },
];

const componentsMap: Record<string, any> = {
  input: Input,
  checkbox: Checkbox.Group,
  radio: Radio.Group,
};

const getSchema = () => {
  return schema.map(({ component, componentProps, ...otherProps }) => {
    let resolvedComponent = component;
    if (typeof component === "string") {
      resolvedComponent = componentsMap[component];
    }
    return { component: resolvedComponent, componentProps, ...otherProps };
  });
};

export default function App() {
  const formInstance = useForm({
    defaultValues: {},
  });

  const { handleSubmit } = formInstance;

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormRender form={formInstance} schema={getSchema()} />
      <button type="submit">Submit</button>
    </form>
  );
}

advanced

import FormRender, {
  useForm,
  FormControllerContext,
} from "react-hook-form-jsonschema-builder";
import { Input, Checkbox, Radio } from "antd";

const schema = [
  {
    field: "name",
    component: "input",
    componentProps: {
      addonBefore: "http://",
    },
  },
  {
    field: "age",
    component: "checkbox",
    componentProps: {
      options: [
        { label: "Apple", value: "Apple" },
        { label: "Pear", value: "Pear" },
        { label: "Orange", value: "Orange" },
      ],
    },
  },
  {
    field: "work",
    component: "radio",
    componentProps: {
      options: [
        { label: "Apple", value: "Apple" },
        { label: "Pear", value: "Pear" },
        { label: "Orange", value: "Orange" },
      ],
    },
  },
];

const componentsMap: Record<string, any> = {
  input: Input,
  checkbox: Checkbox.Group,
  radio: Radio.Group,
};

const functionMap = {
  getDynamicTip: (value) => {
    return `${value} aaaaaaaaa`;
  },
};

export default function App() {
  const formInstance = useForm({
    defaultValues: {},
  });

  const { handleSubmit } = formInstance;

  const onSubmit = (data) => console.log(data);

  return (
    <FormControllerContext.Provider
      value={{ componentsMap, middlewares: [], functionMap }}
    >
      <form onSubmit={handleSubmit(onSubmit)}>
        <FormRender dataSource={{}} form={formInstance} schema={schema} />
        <button type="submit">Submit</button>
      </form>
    </FormControllerContext.Provider>
  );
}

try

Props

FormRender

| Prop | Type | Default | Description | | ------------------ | --------------------------------- | --------- | --------------------------------------------- | | form | FormInstance | - | react-hook-form实例 | | schema | JSON | - | json schema | | dataSource | Object | - | 数据源 |

FormControllerContext

| Prop | Type | Default | Description | | ------------------ | --------------------------------- | --------- | --------------------------------------------- | | componentsMap | Object | - | 组件映射, 与schema 中 component一一对应，需受控组件 | | middlewares | Array | - | 增强组件的插件拓展 | | functionMap | Object | - | 自定义函数，改变字段值 |

License

MIT License (c) peng-yin