Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

mui-dataforms

Package Overview
Dependencies
Maintainers
1
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-dataforms

Dynamically generated data forms for use with Material-UI

  • 0.2.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created
Source

Material-UI Dataforms

Build Status npm package NPM Downloads

MUI Dataforms is a library intended to assist in creating dynamic forms based on a JSON input. Fields are completely dynamic with a multitude of pre-defined components (with the option of custom components).

Getting Started

Installation

npm install mui-dataforms

or

yarn add mui-dataforms

Using the forms

import MuiDataform from 'mui-dataforms'
Define your fields
const fields = [
    {
        title: "Personal Information",
        description: "Some info about yourself.",
        fields: [
            {
                id: 'first-name',
                title: 'First Name',
                type: 'text',
                validation: {
                    required: true,
                    min: 3,
                    max: 16,
                },
                size: {
                    xs: 12,
                    md: 6,
                },
            },
        ]
    }
]
Set up a state
const [values, setValues] = useState({"first-name": "Alex"})

const handleOnChange = (key) => (value) => {
	setValues(prevValues => ({...prevValues, [key]: value}))
}
Implementation
<MuiDataform title={"My Form"} fields={fields} values={values} onChange={handleOnChange}/>

API

<MuiDataform />

The component accepts the following props:

NameTypeDefaultRequiredDescription
titlestring''falseTitle of the form
fieldsarray[]trueData used to describe the fields. Array of section objects.
valuesobject{}falseObject containing the values of the form. Each value's key is linked to the id of the relative field.
onChangefunctiontrueA function that will be triggered when the field changes.
key => value => ()
section:
NameTypeDefaultRequiredDescription
titlestring''falseTitle of the section.
descriptionstring''falseDescription of the section.
fieldsarray[]falseFields for the section. Array of field objects.
field:
NameTypeDefaultRequiredDescription
idstringtrueReference to the value stored in the values object. Required unless type is set to spacer.
titlestringfalseTitle of the field
typestringtrueType of field to display.
enum(text, number, select, date, time, datetime, checkbox, switch, spacer, custom)
validationobjectfalseTitle of the field.
validation.requiredboolfalsefalseTitle of the field.
validation.minintfalseMinimum length or size of input.
validation.maxintfalseMaximum length or size of input.
sizeobject{xs: 12}falseGrid sizing of each field. Uses same sizing from MUI: xs, sm, md, lg, xl.
propsobjectfalseAdditional props to pass through.
optionsarrayfalseRequired for type: select. List of options defined by an array of objects with value and label.
validatorfunctionfalseCustom validation logic that returns whether the input is valid and an optional errorMessage to display to the client.
(value) => {valid, errorMessage}

Keywords

FAQs

Package last updated on 09 Jul 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc