https://github.com/forml-js/forml

forml - extensible react json schema form generator
https://github.com/forml-js/forml

forml forms-generator json-schema-form json-schema-forms json-schemas

Last synced: 2 months ago
JSON representation

forml - extensible react json schema form generator

• Host: GitHub
• URL: https://github.com/forml-js/forml
• Owner: forml-js
• License: mit
• Created: 2019-10-08T03:25:59.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-05T00:34:01.000Z (8 months ago)
• Last Synced: 2024-10-27T20:23:02.674Z (2 months ago)
• Topics: forml, forms-generator, json-schema-form, json-schema-forms, json-schemas
• Language: JavaScript
• Homepage: https://www.forml.dev
• Size: 22.2 MB
• Stars: 7
• Watchers: 2
• Forks: 0
• Open Issues: 17
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Table of Contents

1.  [forml](#org4dec357)

    1.  [Documentation](#documentation)

    2.  [Examples](#org3b18bac)

    3.  [Installation](#installation)

    4.  [Usage](#org09cd307)

    5.  [Customization](#org29eb409)

    6.  [Localization](#org673cf98)



# forml

[![Build Status](https://travis-ci.com/forml-js/forml.svg?branch=master)](https://travis-ci.com/forml-js/forml)

![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/@forml/core)

[![Coverage Status](https://coveralls.io/repos/github/forml-js/forml/badge.svg?branch=master)](https://coveralls.io/github/forml-js/forml?branch=master)

![npm](https://img.shields.io/npm/v/@forml/core)

![npm](https://img.shields.io/npm/l/@forml/core)

forml - react json schema form

A lightweight, efficient, and powerful form rendering library for use with your JSON schemas. Automatically generate

and customize working forms for use in your application. Great for rapid prototyping or production!



## Documentation

View the documentation at [forml.dev](https://www.forml.dev)!



## Examples

You can view the [running demo](https://forml-js.github.io/forml).

Alternatively, you can run them yourself.

    cd examples

    npm install

    npm start



## Installation

```bash

# Substitute @forml/decorator-mui with your preferred decorator

npm i @forml/core @forml/decorator-mui

```



## Usage

Basic usage is as follows:

```jsx

import { SchemaForm } from '@forml/core';

import * as decorator from '@forml/decorator-mui';

import { useState } from 'react';

export function MyForm(props) {

    const [model, setModel] = useState('');

    const schema = { type: 'string', title: 'Sample Form' };

    const form = ['*'];

    return (

        

    );

    function onChange(event, model) {

        setModel(model);

    }

}

```

The `example` directory’s `index.js` uses `SchemaForm` both for the example selector and the example itself.



## Customization

Custom mapped components can be provided. Look at `mapper/index.js` to see a

list of supported object types. New types may be added and used by explicitly

setting the form type.

Appearance/final rendering is handled by the `decorator` components. Currently a `barebones` (pure HTML) and `MaterialUI` decorators are provided.



## Localization

`forml` supports localization via injection. To inject a localizer:

```jsx

import { SchemaForm } from '@forml/core';

import * as decorator from '@forml/decorator-mui';

import { useTranslate } from 'react-i18next';

import { useState } from 'react';

export function MyTranslatedForm(props) {

    const [model, setModel] = useState({});

    const { t } = useTranslate();

    const schema = {

        type: 'object',

        properties: {

            key: {

                type: 'string',

                title: 'Titles are passed through getLocalizedString',

                description: 'Descriptions too',

            },

        },

    };

    const localizer = { getLocalizedString: t };

    return (

        

    );

    function onChange(event, model) {

        setModel(model);

    }

}

```



## Contributing

forml prides itself on being easily extensible. More UI packages are being added and contributions are welcome.