xpfw - Supercharge your JSON-Schema!

Made to be customized

Theming is achieved through react hooks that provide all the data you need.

DecreaseValue of myGuidedNumber is: Increase Randomize

import { ComponentRegistry, IFieldProps, memo, useFieldWithValidation, getLabelFromProps } from "@xpfw/form"
          import { observer } from "mobx-react"
          import * as React from "react"
          
          const GuidedNumbersField: React.FunctionComponent<IFieldProps> = observer((props) => {
            const fieldProps = useFieldWithValidation(props.schema, props.mapTo, props.prefix)
            const memoVals = [props.mapTo, props.prefix, JSON.stringify(props.schema)]
            const randomize = memo(() => () => fieldProps.setValue(Math.round(Math.random() * 100)), memoVals)
            React.useEffect(randomize, memoVals)
            return (
              <div className="is-flex centerJustify has-text-centered is-size-5 marginTop marginBottom">
                <a className="button" onClick={() => {
                  fieldProps.setValue(fieldProps.value - 1)
                }}>Decrease</a>
                <span style={{marginRight: "1rem", marginLeft: "1rem"}}>Value of <i>{getLabelFromProps(props)}</i> is: <b>{fieldProps.value}</b></span>
                <a className="button" onClick={() => {
                  fieldProps.setValue(fieldProps.value + 1)
                }}>Increase</a><a style={{marginLeft: "1rem"}} className="button" onClick={randomize}>Randomize</a>
              </div>
            )
          })
          
          ComponentRegistry.registerComponent("number", GuidedNumbersField, "guided")

Concise form rendering with validation

Fields can easily be themed on a per type basis. Includable jest tests will help ease your mind.

Web

Uses @xpfw/form-bulma

import { iterateSubFields, SharedField } from "@xpfw/form"
import * as React from "react"

const WebForm: React.FunctionComponent<any> = () => {
  const fields: any[] = []
  iterateSubFields({
    title: "yourjsonschema",
    properties: {name: {type: "string", title: "myName"}}
  }, (key, subSchema) => {
    fields.push(<SharedField key={key} schema={subSchema} />)
  })
  return (
    <div>
      {fields}
    </div>
  )
}

name

createdBy

Native

Uses @xpfw/form-native

import { IForm, getFieldsFromForm } from "@xpfw/validate"
import { SharedField } from "@xpfw/form-shared"
import { registerComponents } from "@xpfw/form-native"
import { View } from "react-native"
import { Link } from 'react-static';
// Making sure that @xpfw/form-shared can find components
registerComponents()
class FormRendererNative extends React.Component<{
form: IForm
}, any> {
  public render() {
    const fieldDefs = getFieldsFromForm(this.props.form)
    const fields = fieldDefs.map((field: IField) => {
      return <SharedField key={field.mapTo} field={field} />
    })
    return (
      <View>
        {fields}
      </View>
    )
  }
}

Need more automation?

Check out@xpfw/data. It comes with backend independent CRUD UI's.