README

@adrianhelvik/json-form

This package can be used to generate forms from a JSON object. It has 100% test coverage. Contributions are welcome!

Note

This is still experimental.

Example

import JsonForm from '@adrianhelvik/json-form'

const Form = JsonForm({
  types: {
    string: ({ onChange, value, label }) => (
      <div>
        {label}: <input onChange={e => onChange(e.target.value)} value={value} />
      </div>
    ),
    text: ({ onChange, value, label }) => (
      <div>
        {label}: <textarea onChange={e => onChange(e.target.value)} value={value} />
      </div>
    )
  }
})

const schema = {
  authorName: 'string',
  articles: [{
    title: 'string',
    content: 'text',
  }]
}

<Form schema={schema} value={...} onChange={...} />

Renders the following html:

<div>
  Author name: <input>
</div>
<div>
  <div>
    Title: <input>
  </div>
  <div>
    Title: <input>
  </div>
  ...
  <button>Add item</button>
</div>

As you can see, the keys are transformed from camel case to space delimited words, with the first letter in upper case.

Explicit labels

If you need to use a custom label, use the format below. Specify a type as you normally would, but under a $type key, and specify a label under the $label key.

const schema = {
  author: {
    $type: 'string',
    $label: 'Your name'
  },
  articles: {
    $type: [{
      title: 'string',
      content: 'text',
    }],
    $label: 'A list of nice articles',
  }
}

Multiple array editors

In some cases you might want to define multiple types of array editors. One example that I need is a paginated list and a non-paginated.

Custom array editors are denoted with a symbol in the types object and with an array with its first item being the given symbol in the schema.

const types = {
  string: StringEditor,
  [Symbol.for('paginated')]: PaginatedEditor,
}
const schema = {
  list: [Symbol.for('paginated'), {
    title: 'string'
  }]
}

Dynamic editors with $computedProps

It is often necessary to change the value of something based on an independent variable. A rather poor, but quite simple example of this is an input field with a max length.

const types = {
  string({ value, onChange, maxLength }) {
    return (
      <input
        value={value}
        onChange={e => {
          if (maxLength != null && e.target.value.length >= maxLength)
            e.target.value = e.target.value.slice(0, maxLength)
          onChange(e.target.value)
        }}
      />
    )
  },
  number({ value, onChange }) {
    return (
      <input
        type="number"
        value={value == null ? '' : String(value)}
        onChange={e => {
          onChange(parseInt(e.target.value, 10))
        }}
      />
    )
  }
}
const schema = {
  text: {
    $type: 'string',
    $computedProps({ maxLength }) {
      return { maxLength }
    }
  },
  maxLength: 'number',
}

Additionally you can use the prop computedPropsRest on the form component. (The one returned from JsonForm). this prop should be an array. $computedProps is called with the value as its first argument and the computedPropsRest as the rest argument. See the tests for more info on this.

Licence

MIT, see LICENCE file

Usage no npm install needed!