generate forms from JSON object

Last update: Nov 10, 2021

json-obj-form-generator

generate forms from JSON object

NPM License

Install

npm install --save json-obj-form-generator

For more informations check documentation with sandbox (playground), designer translation generator and much more - here.

Usage of designer

import { JOFGENDesigner } from 'json-obj-form-generator';
import 'bootstrap/dist/css/bootstrap.css'; // most styles are from bootstrap library
import 'json-obj-form-generator/dist/css/designer.css';

...

  render()
  {
    return (
      <JOFGENDesigner 
        extended={true|false}
        json={json} 
        export={true|false} 
        onChange={(json, isValid) =>  {  }} 
        mode={"tree"|"linear"|"linear_merge"} 
      />
    );
  }

...

Usage of generator

import { JOFGENGenerator } from 'json-obj-form-generator';
import 'bootstrap/dist/css/bootstrap.css'; // most styles are from bootstrap library
import 'json-obj-form-generator/dist/css/generator.css';

...

  render()
  {
    return (
      <JOFGENGenerator 
        value={value} 
        json={json} 
        onChange={(value, isValid) => { }} 
        mode={"tree"|"linear"|"linear_merge"} 
      />
    )
  }

...

License

MIT ©Radovan Pranda

GitHub

https://github.com/radovan-pranda/json-obj-form-generator
You might also like...

Generate forms with native look and feel in a breeze

Generate forms with native look and feel in a breeze

React Native Form Generator Generate forms with native look and feel in a breeze Components Picker DatePicker TimePicker Input Link Separator Switch F

Feb 26, 2022

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

React - NextJs + Tailwindcss+ PWA: JSON Visualizer to turn raw and chunky JSON into Visual good-looking data groups

Apr 18, 2022

A React component for building Web forms from JSON Schema.

A React component for building Web forms from JSON Schema.

react-jsonschema-form A simple React component capable of using JSON Schema to declaratively build and customize web forms. Explore the docs » View Pl

May 14, 2022

A React component for building Web forms from JSON Schema.

A React component for building Web forms from JSON Schema.

react-jsonschema-form A simple React component capable of using JSON Schema to declaratively build and customize web forms. Explore the docs » View Pl

May 15, 2022

Forms rendered from JSON

Forms rendered from JSON

Sep 28, 2021

Extends React Native's StyleSheet Object to allow for nesting of styles

react-native-nested-stylesheet Nestable stylesheets for react-native. Installation npm install react-native-nested-stylesheet Usage notes This plugin

Nov 16, 2021

A React component for viewing an STL object from a given URL by utilizing Three.js

React STL Viewer New maintainer needed. A React component for viewing an STL object from a given URL by utilizing Three.js Looking for contributors Se

May 10, 2022

Object Press - A free headless cms built with React

Object Press - A free headless cms built with React

An awesome way to jumpstart your way into the Jamstack! Object Press is a FREE headless content management system. Main Features 99.99% UP time for al

Apr 29, 2022

Connect/Express middleware to use React to generate whole websites

This project is not actively maintained. Proceed at your own risk! react-page-middleware Middleware for building full page apps using React, JSX, and

May 1, 2022

Generate fun kaleidoscope for user avatars.

Generate fun kaleidoscope for user avatars.

React Avatar Generator This was inspired by an old website called LayerVault. You can see an example of how that used to look like here. Getting Start

Apr 29, 2022

a redux middleware to automatically generate tests for reducers through ui interaction

a redux middleware to automatically generate tests for reducers through ui interaction

Redux Test Recorder NOTE YOUR STATE TREE MUST BE SERIALIZABLE Redux test recorder is a redux middleware for automatically generating tests for your re

Apr 24, 2022

A plugin to generate terraform configuration for Nextjs 8 and 9

A plugin to generate terraform configuration for Nextjs 8 and 9

Terraform nextjs plugin A plugin to generate terraform configuration from nextjs pages The reason Nextjs supports serverless pages, where it creates f

Feb 11, 2022

a redux middleware to automatically generate tests for reducers through ui interaction

a redux middleware to automatically generate tests for reducers through ui interaction

Redux Test Recorder NOTE YOUR STATE TREE MUST BE SERIALIZABLE Redux test recorder is a redux middleware for automatically generating tests for your re

Apr 24, 2022

A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Dec 18, 2021

generate react-native-svg component from .svg file

rnsvg-generator convert any svg files into programmable React Component that compatible to react-native-svg Usage npx rnsvg-generator source-path-or-f

Jan 8, 2022

Easily generate flowcharts and diagrams from text ⿻

Easily generate flowcharts and diagrams from text ⿻

Easily generate flowcharts and diagrams from text ⿻

May 7, 2022

Generate React components by replicating your own

Generate React components by replicating your own

Tool for generating React components by replicating your own. It's intended to work no matter how your file structure is. Are you looking for a VS Cod

May 17, 2022

🎶 Generate sine waves with frequency and amplitude (iOS only).

react-native-tone 🎶 Simple library for playing tones in React Native (iOS only). Bridge of https://github.com/picciano/iOS-Tone-Generator ⚠️ Note: th

Mar 15, 2021

library to generate AWS signaure V4 for React Native application

library to generate AWS signaure V4 for React Native application

react-native-aws-signature helps you generate signature for aws request for React-Native applications (or other js applications ) library to generate

Apr 28, 2021
A cli tool to generate cra-template from current create-react-app project.

Create Cra Template A cli tool to generate cra-template from current create-react-app project. Create Cra Template Templates cra-template-popular cra-

Dec 18, 2021
🔑 Generate good customizable passwords
🔑 Generate good customizable passwords

Welcome to password-generator-web ?? ?? password-generator-web in production... ?? Generate good customizable passwords Screenshots ?? Table Of Conten

Jan 28, 2022
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.
Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user.

<Avatar> Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. We use a fallback system th

May 18, 2022
Fluid-type-scale-calculator - Generate font size variables for a fluid type scale with CSS clamp
Fluid-type-scale-calculator - Generate font size variables for a fluid type scale with CSS clamp

Fluid Type Scale Calculator Generate font size variables for a fluid type scale

May 19, 2022
Create-editorconfig - A simple npm script to generate an .editorconfig file

Create EditorConfig A simple npm script to generate an .editorconfig file. You d

Jan 11, 2022
CLI based on Vite to generate your project easily
CLI based on Vite to generate your project easily

CLI based on Vite to generate your project easily

Apr 1, 2022
A block explorer using REACTjs and the JSON RPC API

Info about this particular Block Explorer This block explorer allows the user to filter using either block number, transaction hash, or address. On th

Sep 14, 2021
Initial directory structure and package.json as a seed for new React based projects.

React Project Seed This serves as a seed for starting new React projects. It's less of a boilerplate and more of a suggested directory structure that

Apr 7, 2020
React-contact-management-app - A Contact Management App Using React and JSON
React-contact-management-app - A Contact Management App Using React and JSON

About In this appliication user can add a contact, delete, update amd serach a c

Apr 22, 2022
Document your Typescript React components with TSDoc and export into Storybook-friendly JSON 🤖
Document your Typescript React components with TSDoc and export into Storybook-friendly JSON 🤖

react-tsdoc react-tsdoc is an WIP tool to extract information from React Typescript component files with TSDoc for documentation generation purposes t

Apr 24, 2022