# ez-formikui > #### Easy form generator using Formik, MaterialUI, Google Recaptcha and Axios. Latest version **0.1.67** (published 2021-05-01) · MIT license · 0 weekly downloads ## Install ```sh npm install ez-formikui pnpm add ez-formikui yarn add ez-formikui bun add ez-formikui ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities. Warnings: low downloads; no esm support; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.67 | | Published | 2021-05-01 | | First published | 2020-07-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 8 | | Unpacked size | 203 KB | | Known vulnerabilities | 0 (+25 in 1 direct dependencies) | | Install scripts | no | | Author | David Edri | | Maintainers | davidzz | | Keywords | react, form, forms, formik, json, material, material-ui, materialui | ## Links - npm: https://www.npmjs.com/package/ez-formikui - Repository: https://github.com/DavidEdri/ez-formikui - Issues: https://github.com/DavidEdri/ez-formikui/issues - npm.io page: https://npm.io/package/ez-formikui ## Dependencies (8) - [axios](https://npm.io/package/axios.md) ^0.19.2 - [formik](https://npm.io/package/formik.md) ^2.1.5 - [moment](https://npm.io/package/moment.md) ^2.27.0 - [@date-io/moment](https://npm.io/package/@date-io/moment.md) 1.x - [@material-ui/lab](https://npm.io/package/@material-ui/lab.md) ^4.0.0-alpha.56 - [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.11.0 - [@material-ui/pickers](https://npm.io/package/@material-ui/pickers.md) ^3.2.10 - [react-google-recaptcha](https://npm.io/package/react-google-recaptcha.md) ^2.0.1 ## Alternatives - [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads - [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads - [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads - [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads - [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads ## Recent versions - 0.1.67 (latest) — 2021-05-01 - 0.1.2 (release) — 2020-07-29 - 0.1.1 (prerelease) — 2020-07-27 - 0.1.66 — 2020-11-15 - 0.1.65 — 2020-09-10 - 0.1.64 — 2020-09-05 - 0.1.63 — 2020-08-16 - 0.1.62 — 2020-08-16 - 0.1.61 — 2020-08-16 - 0.1.6 — 2020-08-11 - 0.1.52 — 2020-08-09 - 0.1.51 — 2020-08-07 - 0.1.5 — 2020-08-06 - 0.1.44 — 2020-08-01 - 0.1.43 — 2020-08-01 - … 5 more at https://npm.io/package/ez-formikui/versions ## README # EZ-FormikUI #### Easy form generator using Formik, MaterialUI, Google Recaptcha and Axios. An easy way to generate forms using json like objects. ![](examples/example.gif) # Links - [Installation](#installation) - [Usage](#usage) - [Examples](#examples) - [Config](#config) - [Captcha Key](#captchakey) - [Text](#text) - [Config Setup](#config-setup) - [Props](#props) - [Fields Props](#fields) - [Array](#array) - [Autocomplete](#autocomplete) - [Checkbox](#checkbox) - [Dates](#dates) - [Other](#other) - [Radio](#radio) - [Select](#select) - [Switch](#switch) - [Textarea](#textarea) - [TextField](#textfield) ## Installation npm: ```bash npm install ez-formikui ``` yarn: ```bash yarn add ez-formikui ``` ## Usage ```JSX import EZFormikUI from "ez-formikui"; const Example = () => { return ( alert(JSON.stringify(values, undefined, 4))} validate={values => { const errors = {}; if (values.custom > 2) { errors.custom = "No more then 2!"; } return errors; }} /> ); }; ``` ## Examples [JS Example](examples/example.js) [TS Example](examples/example.tsx) [![Edit EZ-FormikUI example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/ez-formikui-example-ivkvu?fontsize=14&hidenavigation=1&theme=dark) ## Config General [config](src/config/index.ts) that the form uses. ```JSX const config = { captchaKey: "", text: { checkCaptcha: "Check the box!", submit: "Submit", selectEmpty: "None", addNewItem: (name: string) => `Add new ${name}`, }, }; export default config; ``` #### captchaKey If you want to use captcha in your forms [register to get captcha key](http://www.google.com/recaptcha/admin) and [set up you're key](#config-setup) #### text Default text that the form will use. [here](#config-setup) you can change it. ### Config Setup To change the config import the `setCaptchaKey, changeText` from the package. **Example:** ```JSX import React from "react"; import { setCaptchaKey, changeText } from "ez-formikui"; const captchaKey = ""; const textObj = { checkCaptcha: "Check the box!", submit: "Submit", selectEmpty: "Clear Selection", addNewItem: (name: string) => `Add new ${name} to the array.`, }; setCaptchaKey(captchaKey); changeText(textObj); export default function App() { return ( ... ); }; ``` ## Props | Name | Type | Required | Default | Description | | :----------------: | :-----------------------------------------------------: | :----------------: | --------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [fields](#fields) | [FieldType\[\]\(array\)](#fields) | :heavy_check_mark: | | an array of fields to be generated in the form. | | title | string | :x: | | adds title to the form. | | paragraph | string | :x: | | adds paragraph to the form. | | validationSchema | [yup validation schema](https://github.com/jquense/yup) | :x: | | validates your form with yup schema | | validate | func | :x: | | a function to validate your form
**signature:**
(values: object) => object
| | onSubmit | func \| string | :heavy_check_mark: | | a function / url to submit your form
if string is provided the values will be submitted to the given url (default request method is post, can be changed with submitMethod prop).
if function is provided then the function will be called upon submit (the function will be wrapped automatically in try catch block to handle errors)
**signature:**
(values: object, actions: FormikHelpers) => void
| | submitMethod | get \| delete \| put \| patch \| post | :x: | `post` | HTTP request method to send the form data (only works if the onSubmit prop is a string) | | afterDefaultSubmit | func | :x: | | a function to execute after default submit (only executed if onSubmit prop is a string).
**signature:**
(res: AxiosResponse, actions: FormikHelpers) => void
| | useCaptcha | boolean | :x: | `false` | if set to true the form will use google recpatcha v2 (note that to use this feature you will need to [set up captcha key](#captchakey)) | | gridProps | object | :x: | {
alignItems: "center",
direction: "row",
justify: "space-between",
spacing: 1,
} | [MaterialUI](https://material-ui.com/) [Grid props](https://material-ui.com/api/grid/) to be applied to the fields div container | | submitProps | object | :x: | {
grid:{xs:12}
} | [props](#submit-props) to apply on the submit button | ## Fields The fields of the form. Checkout the [examples](#examples). ### Array | Prop Name | Type | Required | Default | Description | | :----------: | --------------------------------- | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"array"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | initialValue | array | :heavy_check_mark: | | the initialValue of the field. | | of | [FieldType\[\]\(array\)](#fields) | :heavy_check_mark: | | the fields that will render on each row of the array
note that nested arrays is not supported | | max | number | :x: | | if provided the array will have max length. | | startEmpty | boolean | :x: | `false` | if true the array will starts as an empty array. | | newItemText | string | :x: | | the text that will render on the add new item button.
this will override the default text | | rowProps | object | :x: | | extra props to pass to the row (style, className, etc...) | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Autocomplete | Prop Name | Type | Required | Default | Description | | :----------: | ------ | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"autocomplete"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | options | array | :heavy_check_mark: | | the options of the component
needs to be array of `{ value: any; label: string }` | | initialValue | any | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Checkbox | Prop Name | Type | Required | Default | Description | | :----------: | -------- | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"checkbox"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | options | array | :heavy_check_mark: | | the options of the component
needs to be array of `{ value: any; label: string }` | | initialValue | string[] | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Dates Date pickers (date, time or date and time). | Prop Name | Type | Required | Default | Description | | :----------: | ---------------------------------------------------------------------------------------------------------------------------- | :----------------: | ------------ | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be on of `"date" \| "time" \| "datetime"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | initialValue | [MomentInput](https://github.com/moment/moment/blob/2c0b063b3bf95a285f9b38c173e262b6416c2e7f/ts3.1-typings/moment.d.ts#L414) | :x: | `Date.now()` | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Other Create your own component. | Prop Name | Type | Required | Default | Description | | :----------: | --------- | :----------------: | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"other"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | component | Component | :heavy_check_mark: | | an React component that will receive [those props](https://github.com/DavidEdri/ez-formikui/blob/5f53e39d6efc8a1de41c32ccdd88083cf2f14611/src/inputs/Other/EZOther.tsx#L7) | | initialValue | any | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Radio | Prop Name | Type | Required | Default | Description | | :----------: | ------ | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"radio"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | options | array | :heavy_check_mark: | | the options of the component
needs to be array of `{ value: any; label: string }` | | initialValue | string | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Select | Prop Name | Type | Required | Default | Description | | :----------: | ------- | :----------------: | ----------- | ---------------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"select"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | options | array | :heavy_check_mark: | | the options of the component
needs to be array of `{ value: any; label: string }` | | initialValue | any | :heavy_check_mark: | | the initialValue of the field. | | isMulti | boolean | :x: | `false` | if set to true the multiple options could be selected.
in this case the initialValue suppose to be array | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Switch | Prop Name | Type | Required | Default | Description | | :----------: | ------- | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"switch"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | initialValue | boolean | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### Textarea | Prop Name | Type | Required | Default | Description | | :----------: | ------ | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"textarea"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | rows | number | :heavy_check_mark: | | the number of initial rows the textarea will have. | | rowsMax | number | :x: | 999 | the number of max rows. | | initialValue | string | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ### TextField | Prop Name | Type | Required | Default | Description | | :----------: | -------------------------------------------------- | :----------------: | ----------- | --------------------------------------------------------------------------------------------------------------- | | type | string | :heavy_check_mark: | | the type of the field
needs to be `"text"` in this case | | fieldName | string | :heavy_check_mark: | | the name of the field
note that it needs to be unique and cannot be `"fieldName"` (causes a bug) | | label | string | :heavy_check_mark: | | the label of the field. | | options | `"email" | "password" | "number" | "tel" | "text"` | :heavy_check_mark: | | the type of the input. | | initialValue | string | number | Date | :heavy_check_mark: | | the initialValue of the field. | | props | object | :x: | | extra props to pass to the component (style, className, etc...) | | grid | object | :x: | `{ xs:12 }` | [Grid Sizes object](src/types/InputGrid.d.ts) | ## License [MIT](https://choosealicense.com/licenses/mit/) ``` ``` --- _Source: https://npm.io/package/ez-formikui · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._