https://github.com/vutran/react-jsonschema

:art: Create beautiful forms with JSONSchema
https://github.com/vutran/react-jsonschema

form javascript json-schema material-ui react

Last synced: about 1 month ago
JSON representation

:art: Create beautiful forms with JSONSchema

• Host: GitHub
• URL: https://github.com/vutran/react-jsonschema
• Owner: vutran
• License: mit
• Created: 2016-06-24T22:14:31.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-03-06T16:08:24.000Z (almost 7 years ago)
• Last Synced: 2024-12-09T03:55:28.312Z (2 months ago)
• Topics: form, javascript, json-schema, material-ui, react
• Language: JavaScript
• Homepage: https://vutran.github.io/react-jsonschema/
• Size: 491 KB
• Stars: 31
• Watchers: 7
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# React JSONSchema

[![Build Status](https://travis-ci.org/vutran/react-jsonschema.svg?branch=develop)](https://travis-ci.org/vutran/react-jsonschema) [![Coverage Status](https://coveralls.io/repos/github/vutran/react-jsonschema/badge.svg?branch=develop)](https://coveralls.io/github/vutran/react-jsonschema?branch=develop) [![license](https://img.shields.io/github/license/mashape/apistatus.svg?maxAge=2592000)]()

> Create beautiful forms with [JSONSchema](http://json-schema.org)

> Inspired by [react-jsonschema-form](https://github.com/mozilla-services/react-jsonschema-form) from Mozilla.

![](screenshot.png?raw=true)

## Installation

````bash

$ npm install --save react-jsonschema

````

## Usage

````js

import Form from 'react-jsonschema';

const schema = {

  "title": "Basic Demo",

  "type": "object",

  "properties": {

    "firstName": {

      "type": "string",

      "title": "First Name",

    },

    "lastName": {

      "type": "string",

      "title": "Last Name",

    },

    "age": {

      "type": "integer",

      "title": "Age",

      "description": "Age in years",

    },

  },

};

const formData = {

  firstName: '',

  lastName: '',

  age: '',

};

ReactDOM.render(

   {

      console.log(errors);

    }}

    onSubmit={data => {

      console.log(data);

    }}

  />,

  document.getElementById('app'),

);

````

## Contributing

1. Clone the repository

2. Install dependencies

  **With `npm`:**

  ```bash

  $ npm install

  ```

  **With [`yarn`](https://github.com/yarnpkg/yarn):**

  ```bash

  $ yarn

  ```

3. Run tests: `npm t`

## References

- [JSON Schema](http://json-schema.org/)

## Support

Like what you see? [Become a Patron](https://www.patreon.com/vutran) and support me via a monthly donation.

## License

MIT © [Vu Tran](https://github.com/vutran/)