https://github.com/gravel-form/gravel

A middleware framework for react json schema form
https://github.com/gravel-form/gravel

form json jsonschema react schema

Last synced: about 1 month ago
JSON representation

A middleware framework for react json schema form

• Host: GitHub
• URL: https://github.com/gravel-form/gravel
• Owner: gravel-form
• Created: 2019-10-06T09:42:07.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-05T17:36:05.000Z (about 2 years ago)
• Last Synced: 2024-11-15T22:51:31.466Z (about 2 months ago)
• Topics: form, json, jsonschema, react, schema
• Language: TypeScript
• Homepage:
• Size: 208 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

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 (

    


      {schema.title || [dataPath.length - 1]}

      


      {schema.description ? (

        <>

          Description: {schema.description}

          


        >

      ) : null}

      {next(props)}

      


      {error ? `Error: ${error.message}` : null}

    

  );

}


function StringInput(props) {

  const { schema, data, onChange, next } = props;

  if (schema.type !== 'string') return next(props);

  return  onChange(e.target.value)} />;

}

function SubmitButton(props) {

  const {

    parent,

    next,

    formProps: { onSubmit },

  } = props;

  if (parent || !onSubmit) return next(props);

  return (

    <>

      {next(props)}

      submit

    >

  );

}

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 (

    <>

       alert(JSON.stringify(data))}

      />

      


      {JSON.stringify(data)}

    >

  );

}

export default App;

```