# formify-json

> JSON form builder for React

Latest version **1.0.3** (published 2023-05-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install formify-json
pnpm add formify-json
yarn add formify-json
bun add formify-json
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2023-05-29 |
| First published | 2023-05-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 165.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | alexander |
| Maintainers | alega |
| Keywords | react, typescript, form-builder, json-form |

## Links

- npm: https://www.npmjs.com/package/formify-json
- Repository: https://github.com/alegaagafonov/FormifyJSON
- npm.io page: https://npm.io/package/formify-json

## Dependencies (7)

- [zod](https://npm.io/package/zod.md) ^3.21.4
- [@mui/material](https://npm.io/package/@mui/material.md) ^5.13.1
- [@emotion/react](https://npm.io/package/@emotion/react.md) ^11.11.0
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^11.11.0
- [react-hook-form](https://npm.io/package/react-hook-form.md) ^7.43.9
- [@hookform/resolvers](https://npm.io/package/@hookform/resolvers.md) ^3.1.0
- [@mui/icons-material](https://npm.io/package/@mui/icons-material.md) ^5.11.16

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.3 (latest) — 2023-05-29
- 1.0.2 — 2023-05-25
- 1.0.1 — 2023-05-20

## README

# FormifyJSON

FormifyJSON is a customizable and dynamic form component for React applications. It supports various input types and conditional display logic.

## Installation

You can install FormifyJSON using npm:

```bash
npm i formify-json
```

Or with yarn:

```bash
yarn add formify-json
```

## Usage

To use FormRenderer, you'll need to define your form inputs as an array of `FormField` objects, each representing a field. FormRenderer supports various input types defined by the `FormInputTypes` enum.

Here's an example of how you can define your form fields:

```tsx
import { FormRenderer, FormField, FormInputTypes } from 'formify-json';

const formInputs: FormField[] = [
  {
    name: "overallGrade",
    label: "How would you rate your overall experience?",
    type: FormInputTypes.StarRating,
  },
  {
    name: "detailedFeedback",
    label: "What could we do better?",
    type: FormInputTypes.MultimediaSuggestion,
    placeholder: "Please let us know what aspects of our product or service disappointed you and how we can improve.",
    displayCondition: {
      questionId: "overallGrade",
      operator: "lte",
      value: 2,
    },
  },
  // More fields...
];

// Then you can use these fields in the FormRenderer:

<FormifyJSON formFields={formInputs} />
```

For the details of each type (`FormField`, `FormInputTypes`, `DisplayCondition`), please refer to the type definitions in the package.

---
_Source: https://npm.io/package/formify-json · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._