# react-schema-final-form

> A simple library to build a form based on react-final-form and JSON Schema.

Latest version **0.2.0** (published 2018-06-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-schema-final-form
pnpm add react-schema-final-form
yarn add react-schema-final-form
bun add react-schema-final-form
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2018-06-20 |
| First published | 2018-03-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=6.0.0 |
| Dependencies | 2 |
| Unpacked size | 121.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Author | Shuo Wang |
| Maintainers | leuction |
| Keywords | JSON Schema, React Final Form, React |

## Links

- npm: https://www.npmjs.com/package/react-schema-final-form
- Repository: https://github.com/leuction/react-schema-final-form
- npm.io page: https://npm.io/package/react-schema-final-form

## Dependencies (2)

- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [lodash.set](https://npm.io/package/lodash.set.md) ^4.3.2

## 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

- 0.2.0 (latest) — 2018-06-20
- 0.1.12 — 2018-06-20
- 0.1.11 — 2018-05-03
- 0.1.7 — 2018-05-03
- 0.1.6 — 2018-05-03
- 0.1.5 — 2018-05-03
- 0.1.4 — 2018-05-03
- 0.1.3 — 2018-05-03
- 0.1.2 — 2018-05-03
- 0.1.1 — 2018-05-02
- 0.1.0 — 2018-05-02
- 0.0.15 — 2018-04-06
- 0.0.14 — 2018-04-04
- 0.0.13 — 2018-04-03
- 0.0.12 — 2018-04-03
- … 10 more at https://npm.io/package/react-schema-final-form/versions

## README

# React-Schema-Final-Form [![Build Status](https://travis-ci.org/leuction/react-schema-final-form.svg?branch=master)](https://travis-ci.org/leuction/react-schema-final-form/)


> A simple hoc to build a form based on react-final-form and JSON Schema. This library is highly inspried by [Liform-react](https://github.com/Limenius/liform-react/)

## Installation

Via **npm** into a fresh project:

```sh
npm install react-schema-final-form
```

Or use the **yarn** to install that:

```sh
yarn add react-schema-final-form
```

## Basic Usage

The React-schema-final-form will return a component called `<RenderedFields />`, which will be a bunch of Fields based on the the json schema. it will also return a validator called `validate` that we can use to validate the data based on the json schema.

```javascript
import SchemaForm from 'react-schema-final-form';
// You can build you own theme based on the example right here.
import theme from 'react-schema-final-form-material-ui';

// Some schema which the outermost layer is object
const schema = {
  // other properties.
  type: 'object',
  properties: {
    foo: {
      type: 'string',
      title: 'Foo',
    },
    bar: {
      type: 'integer',
      title: 'Bar',
    },
  },
  required: [foo]
}

const Form = props => {
  const {
    schema,
  } = props;
  return (
    // The schema and the theme are required
    <SchemaForm
      schema={schema}
      theme={theme}
    >
      {({ RenderedFields, validate }) => (
        // The RenderedFields will be the Field components based on the theme we created, the validate will be the sync validator based on the ajv json schema validator.
        <Form
          onSubmit={values => window.alert(JSON.stringify(values, 0, 2))}
          validate={validate}
          validateOnBlur
        >
          {({ handleSubmit, pristine, invalid }) => (
            <form onSubmit={handleSubmit}>
              <RenderedFields />
              {/* You can put anything strange here */}
              <button type="submit" disabled={pristine || invalid}>
                Submit
              </button>
            </form>
          )}
        </Form>
      )}
    </SchemaForm>
  )
}
```

## Customization

This library will render the `<Field />` based on the theme you provided in. The theme is basically is object. By default, it will render them by the type. For example, if your json-schema looks like this: 

```javascript
const schema = {
  type: 'string',
}

// theme/index.js
import OtherTheme from 'react-schema-final-form-material-ui';
import StringWidget from './StringWidget';

const theme = {
  ...OtherTheme,
  string: StringWidget,
}
```

If we overwrite the string. we will render the string based on StringWidget.

Please refer to the [react-schema-final-form-material-ui](https://github.com/leuction/react-schema-final-form-material-ui) for examples about how to write a theme.

## Feature Support

- [x] real-time validation
- [x] $ref support
- [ ] allOf support
- [ ] oneOf support
- [ ] anyOf support

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