-The following props are passed to a custom field template component:
-- `id`: The id of the field in the hierarchy. You can use it to render a label targeting the wrapped widget.
-- `classNames`: A string containing the base Bootstrap CSS classes, merged with any [custom ones](#custom-css-class-names) defined in your uiSchema.
-- `label`: The computed label for this field, as a string.
-- `description`: A component instance rendering the field description, if one is defined (this will use any [custom `DescriptionField`](#custom-descriptions) defined).
-- `rawDescription`: A string containing any `ui:description` uiSchema directive defined.
-- `children`: The field or widget component instance for this field row.
-- `errors`: A component instance listing any encountered errors for this field.
-- `rawErrors`: An array of strings listing all generated error messages from encountered errors for this field.
-- `help`: A component instance rendering any `ui:help` uiSchema directive defined.
-- `rawHelp`: A string containing any `ui:help` uiSchema directive defined. **NOTE:** `rawHelp` will be `undefined` if passed `ui:help` is a React component instead of a string.
-- `hidden`: A boolean value stating if the field should be hidden.
-- `required`: A boolean value stating if the field is required.
-- `readonly`: A boolean value stating if the field is read-only.
-- `disabled`: A boolean value stating if the field is disabled.
-- `displayLabel`: A boolean value stating if the label should be rendered or not. This is useful for nested fields in arrays where you don't want to clutter the UI.
-- `fields`: An array containing all Form's fields including your [custom fields](#custom-field-components) and the built-in fields.
-- `schema`: The schema object for this field.
-- `uiSchema`: The uiSchema object for this field.
-- `formContext`: The `formContext` object that you passed to Form.
+## Documentation
+Documentation is hosted on: https://react-jsonschema-form.readthedocs.io/
-> Note: you can only define a single field template for a form. If you need many, it's probably time to look at [custom fields](#custom-field-components) instead.
-
-### Array Field Template
-
-Similarly to the `FieldTemplate` you can use an `ArrayFieldTemplate` to customize how your
-arrays are rendered. This allows you to customize your array, and each element in the array.
-
-```jsx
-function ArrayFieldTemplate(props) {
- return (
- Yeah, I'm pretty dumb.
-Yeah, I'm pretty dumb.
+
+
+## Philosophy
+
+react-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). It is a major component in the [kinto-admin](https://github.com/Kinto/kinto-admin/) project. If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have _a priori_ knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere.
+
+react-jsonschema-form validates that the data conforms to the given schema, but doesn't prevent the user from inputing data that doesn't fit (for example, stripping non-numbers from a number field, or adding values to an array that is already "full").
+
+## Installation
+
+Requires React 15.0.0+.
+
+> Note: The `master` branch of the repository reflects ongoing development. Releases are published as [tags](https://github.com/mozilla-services/react-jsonschema-form/releases). You should never blindly install from `master`, but rather check what the available stable releases are.
+
+
+### As a npm-based project dependency
+
+```bash
+$ npm install react-jsonschema-form --save
+```
+
+> Note: While the library renders [Bootstrap](http://getbootstrap.com/) HTML semantics, you have to build and load the Bootstrap styles on your own.
+
+### As a script served from a CDN
+
+```html
+
+```
+
+Source maps are available at [this url](https://unpkg.com/react-jsonschema-form/dist/react-jsonschema-form.js.map).
+
+> Note: The CDN version **does not** embed `react` or `react-dom`.
+
+You'll also need to alias the default export property to use the Form component:
+
+```jsx
+const Form = JSONSchemaForm.default;
+// or
+const {default: Form} = JSONSchemaForm;
+```
+
+## Usage
+
+```jsx
+import React, { Component } from "react";
+import { render } from "react-dom";
+
+import Form from "react-jsonschema-form";
+
+const schema = {
+ title: "Todo",
+ type: "object",
+ required: ["title"],
+ properties: {
+ title: {type: "string", title: "Title", default: "A new task"},
+ done: {type: "boolean", title: "Done?", default: false}
+ }
+};
+
+const log = (type) => console.log.bind(console, type);
+
+render((
+
+), document.getElementById("app"));
+```
+
+This will generate a form like this (assuming you loaded the standard [Bootstrap](http://getbootstrap.com/) stylesheet):
+
+
+
+### Form initialization
+
+Often you'll want to prefill a form with existing data; this is done by passing a `formData` prop object matching the schema:
+
+```jsx
+const formData = {
+ title: "First task",
+ done: true
+};
+
+render((
+
+), document.getElementById("app"));
+```
+
+> Note: If your form has a single field, pass a single value to `formData`. ex: `formData='Charlie'`
+
+> WARNING: If you have situations where your parent component can re-render, make sure you listen to the `onChange` event and update the data you pass to the `formData` attribute.
+
+### Form event handlers
+
+#### Form submission
+
+You can pass a function as the `onSubmit` prop of your `Form` component to listen to when the form is submitted and its data are valid. It will be passed a result object having a `formData` attribute, which is the valid form data you're usually after. The original event will also be passed as a second parameter:
+
+```js
+const onSubmit = ({formData}, e) => console.log("Data submitted: ", formData);
+
+render((
+
+), document.getElementById("app"));
+```
+
+#### Form error event handler
+
+To react when submitted form data are invalid, pass an `onError` handler. It will be passed the list of encountered errors:
+
+```js
+const onError = (errors) => console.log("I have", errors.length, "errors to fix");
+
+render((
+
+), document.getElementById("app"));
+```
+
+#### Form data changes
+
+If you plan on being notified every time the form data are updated, you can pass an `onChange` handler, which will receive the same args as `onSubmit` any time a value is updated in the form.
+
+#### Form field blur events
+
+Sometimes you may want to trigger events or modify external state when a field has been touched, so you can pass an `onBlur` handler, which will receive the id of the input that was blurred and the field value.
+
+#### Form field focus events
+
+Sometimes you may want to trigger events or modify external state when a field has been focused, so you can pass an `onFocus` handler, which will receive the id of the input that is focused and the field value.
+
+### Submit form programmatically
+You can use the reference to get your `Form` component and call the `submit` method to submit the form programmatically without a submit button.
+This method will dispatch the `submit` event of the form, and the function, that is passed to `onSubmit` props, will be called.
+
+```js
+const onSubmit = ({formData}) => console.log("Data submitted: ", formData);
+let yourForm;
+
+render((
+
);
@@ -294,5 +304,7 @@ if (process.env.NODE_ENV !== "production") {
transformErrors: PropTypes.func,
safeRenderCompletion: PropTypes.bool,
formContext: PropTypes.object,
+ customFormats: PropTypes.object,
+ additionalMetaSchemas: PropTypes.arrayOf(PropTypes.object),
};
}
diff --git a/src/components/fields/ArrayField.js b/src/components/fields/ArrayField.js
index 79638bab58..16ecdf23a9 100644
--- a/src/components/fields/ArrayField.js
+++ b/src/components/fields/ArrayField.js
@@ -1,8 +1,8 @@
import AddButton from "../AddButton";
import IconButton from "../IconButton";
import React, { Component } from "react";
-import PropTypes from "prop-types";
import includes from "core-js/library/fn/array/includes";
+import * as types from "../../types";
import UnsupportedField from "./UnsupportedField";
import {
@@ -21,8 +21,7 @@ import {
function ArrayFieldTitle({ TitleField, idSchema, title, required }) {
if (!title) {
- // See #312: Ensure compatibility with old versions of React.
- return ;
+ return null;
}
const id = `${idSchema.$id}__title`;
return