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

A flexible middlewares driven json schema form with Chakra UI
https://github.com/gravel-form/chakra-ui-form

chakra-ui form json-schema jsonschema react

Last synced: 3 months ago
JSON representation

A flexible middlewares driven json schema form with Chakra UI

• Host: GitHub
• URL: https://github.com/gravel-form/chakra-ui-form
• Owner: gravel-form
• License: mit
• Created: 2020-07-05T10:25:44.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T10:40:07.000Z (almost 2 years ago)
• Last Synced: 2024-07-08T20:09:41.840Z (4 months ago)
• Topics: chakra-ui, form, json-schema, jsonschema, react
• Language: TypeScript
• Homepage:
• Size: 7.37 MB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @gravel-form/chakra-ui

A flexible middlewares driven json schema form. The only limitation is your imagination.

## Quick start

```bash

npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming

npm install @gravel-form/chakra-ui

```

``` jsx

import React from 'react';

import { theme, ThemeProvider, CSSReset } from '@chakra-ui/core';

import { Form } from '@gravel-form/chakra-ui/lib';

function MyFirstForm() {

  const schema = {

    type: 'object',

    properties: {

      username: { type: 'string' },

      password: { type: 'string' },

    },

  };

  const extraProps = {

    properties: {

      password: {

        props: { type: 'password' },

      },

    },

  };

  const [data, setData] = React.useState();

  return (

     {

        alert(JSON.stringify(data, null, 2));

      }}

    />

  );

}

function App() {

  return (

    

      

      

    

  );

}

export default App;

```

## Playground

More examples can be found on the [playground](https://gravel-form.github.io/chakra-ui-form/basic).