Releases: rjsf-team/react-jsonschema-form
v0.36.0
v0.35.1
v0.35.0
Changelog
- Fixes #250: Add support for custom widget options. (#252)
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
v0.34.0
v0.33.3
v0.33.2
v0.33.1
v0.33.0
- 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 theitems
property of anarray
field - with the
uniqueItems
property set totrue
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
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.