Skip to content

Releases: rjsf-team/react-jsonschema-form

v0.36.0

06 Jul 11:47

Choose a tag to compare

  • Fixed #217: Implement array field entries reordering (#247)
  • Fixed corrupted idSchema when the schema has a field named id (#262)
  • Fixed #218: Allow rendering description from schema for all fields. (#263)
  • Fixed #255: Replace deeper dependency with local deepEquals helper. (#264)

v0.35.1

04 Jul 06:38

Choose a tag to compare

  • Remove warnings with React 15.2.0. (#257)

v0.35.0

30 Jun 15:42

Choose a tag to compare

Changelog

Breaking changes

The options prop passed to your custom widget can now be used for any purpose, and not only the list of options (label and value) for enum fields. This latter list of options is now passed in an enumOptions property in the options prop.

That means that if you have code like this:

const schema = {
  type: "string",
  enum: ["foo", "bar"],
};

function MyCustomWidget(props) {
  const {options}  props; // Previously, the list of enum options was passed straight away
  return (
    <select>{
      options.map(({label, value}, i) => {
        return <option key={i} value={value}>{label}</option>;
      })
    }</select>
  );
}

const uiSchema = {
  "ui:widget": MyCustomWidget
};

You need to upgrade it to:

const schema = {
  type: "string",
  enum: ["foo", "bar"],
};

function MyCustomWidget(props) {
  const {options}  props;
  const {enumOptions} = options; // The list of options is now one level deeper
  return (
    <select>{
      enumOptions.map(({label, value}, i) => { 
        return <option key={i} value={value}>{label}</option>;
      })
    }</select>
  );
}

const uiSchema = {
  "ui:widget": MyCustomWidget
};

v0.34.1

22 Jun 16:35

Choose a tag to compare

  • Ensure use of property specific ui:field suppresses the default label (#242)

v0.34.0

20 Jun 16:04

Choose a tag to compare

  • Added support for disabling form validation entirely (#240)

To disable validation entirely, you can now set Form's noValidate prop to true.

v0.33.3

20 Jun 14:29

Choose a tag to compare

  • Allow numbers with a 0 after the decimal place to be typed into a NumberField (#239)

v0.33.2

09 Jun 14:22

Choose a tag to compare

  • Fixed #231: Reset ObjectField state on diffing formData keys.
    This prevents reusing old object field formData when new ones are passed as props with keys modified. (#234)

v0.33.1

03 Jun 20:55

Choose a tag to compare

  • Merged #203: Add support for standard HTML attributes to Form component (#203)
  • Fixed #220: Fixed ui:help generated semantics.

v0.33.0

02 Jun 15:15

Choose a tag to compare

  • Merged #224: Added a multiple checkboxes widget.

Multiple choices list

The default behavior for array fields is a list of text inputs with add/remove buttons. Though there are two alternative simpler widgets for common situations like picking elements against a list of choices; typically this maps to a schema having:

  • an enum list for the items property of an array field
  • with the uniqueItems property set to true

Example:

const schema = {
  type: "array",
  title: "A multiple choices list",
  items: {
    type: "string",
    enum: ["foo", "bar", "fuzz", "qux"],
  },
  uniqueItems: true
};

By default, this will automatically render a multiple select box. If you prefer a list of checkboxes, just set the uiSchema ui:widget directive to "checkboxes" for that field:

const uiSchema = {
  "ui:widget": "checkboxes"
};

See the "Arrays" section of the playground for cool demos.

v0.32.0

31 May 16:22

Choose a tag to compare

Introducing FileWidget (#193)

This library supports a limited form of input[type=file] widgets, in the sense that it will propagate file contents to form data state as data-urls.

There are two ways to use file widgets:

By declaring a string json schema type along a data-url format:

const schema = {
  type: "string",
  format: "data-url",
};

By specifying a ui:widget field uiSchema directive as file:

const schema = {
  type: "string",
};

const uiSchema = {
  "ui:widget": "file",
};
Multiple files

Multiple files selectors are supported by defining an array of strings having data-url as a format:

const schema = {
  type: "array",
  items: {
    type: "string",
    format: "data-url",
  }
};

Note that storing large dataURIs into form state might slow rendering.