# @gravel-form/core-rc

> A middleware framework for react json schema form

Latest version **0.0.3** (published 2020-07-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install @gravel-form/core-rc
pnpm add @gravel-form/core-rc
yarn add @gravel-form/core-rc
bun add @gravel-form/core-rc
```

## 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.0.3 |
| Published | 2020-07-02 |
| First published | 2020-04-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 81.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | knilink |
| Keywords | form, json, json-schema, react, shema |

## Links

- npm: https://www.npmjs.com/package/@gravel-form/core-rc
- Repository: https://github.com/gravel-form/gravel
- Homepage: https://github.com/gravel-form/gravel#readme
- Issues: https://github.com/gravel-form/gravel/issues
- npm.io page: https://npm.io/package/@gravel-form/core-rc

## Dependencies (1)

- [@types/json-schema](https://npm.io/package/@types/json-schema.md) ^7.0.5

## 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.0.3 (latest) — 2020-07-02
- 0.0.2 — 2020-04-03
- 0.0.1 — 2020-04-01

## README

# gravel
Middleware framework for react jsonschema form

## Installation
```bash
npm install @gravel-form/core-rc
```

## Build a jsonschema form from scratch

```bash
npx create-react-app my-form
cd my-form
npm install @gravel-form/core-rc ajv
```

``` jsx
import React from 'react';
import Ajv from 'ajv';
import { FixedObjectArrayMw, toJSONSchemaPath, FormCore } from '@gravel-form/core';

const ajv = new Ajv({
  errorDataPath: 'property',
  allErrors: true,
  multipleOfPrecision: 8,
  schemaId: 'auto',
  unknownFormats: 'ignore',
});

function ValidateMw(props) {
  const { parent, schema, data, next, errors } = props;
  const errs = React.useMemo(() => {
    if (parent) return null;
    ajv.validate(schema, data);
    return ajv.errors;
  }, [schema, data]);
  return next(parent ? props : { ...props, errors: errs });
}

function FormItemTemplateMw(props) {
  const { schema, dataPath, errors, next } = props;
  if (schema.type === 'object' || schema.type === 'array') return next(props);
  const id = toJSONSchemaPath(dataPath);
  const error = errors && errors.find(({ dataPath }) => dataPath === id);
  return (
    <div>
      <label>{schema.title || [dataPath.length - 1]}</label>
      <br />
      {schema.description ? (
        <>
          Description: {schema.description}
          <br />
        </>
      ) : null}
      {next(props)}
      <br />
      {error ? `Error: ${error.message}` : null}
    </div>
  );
}

function StringInput(props) {
  const { schema, data, onChange, next } = props;
  if (schema.type !== 'string') return next(props);
  return <input value={data || ''} onChange={(e) => onChange(e.target.value)} />;
}

function SubmitButton(props) {
  const {
    parent,
    next,
    formProps: { onSubmit },
  } = props;
  if (parent || !onSubmit) return next(props);
  return (
    <>
      {next(props)}
      <button onClick={onSubmit}>submit</button>
    </>
  );
}

const middlewares = [ValidateMw, FormItemTemplateMw, SubmitButton, FixedObjectArrayMw, StringInput];

const schema = {
  type: 'object',
  properties: {
    username: {
      title: 'User Name:',
      type: 'string',
    },
    password: {
      type: 'string',
      title: 'Password:',
      description: 'at least 6 characters',
      minLength: 6,
    },
  },
};

function App() {
  const [data, setData] = React.useState({});
  return (
    <>
      <FormCore
        schema={schema}
        data={data}
        middlewares={middlewares}
        onChange={setData}
        onSubmit={() => alert(JSON.stringify(data))}
      />
      <br />
      {JSON.stringify(data)}
    </>
  );
}

export default App;
```

---
_Source: https://npm.io/package/@gravel-form/core-rc · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._