From 4c3fd1b596b60069b6f7d339372b6aa25a2a9369 Mon Sep 17 00:00:00 2001
From: Julien Bouquillon <julien@revolunet.com>
Date: Fri, 10 Mar 2017 01:22:59 +0100
Subject: [PATCH] doc: add custom ErrorList for #488

---
 README.md | 35 +++++++++++++++++++++++++++++++++++
 1 file changed, 35 insertions(+)

diff --git a/README.md b/README.md
index 9ec4553255..c2261c9189 100644
--- a/README.md
+++ b/README.md
@@ -52,6 +52,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
   - [Advanced customization](#advanced-customization)
      - [Field template](#field-template)
      - [Array Field Template](#array-field-template)
+     - [Error list Template](#error-list-template)
      - [Custom widgets and fields](#custom-widgets-and-fields)
      - [Custom widget components](#custom-widget-components)
         - [Custom component registration](#custom-component-registration)
@@ -809,6 +810,38 @@ The following props are part of each element in `items`:
 - `onReorderClick: (index, newIndex) => (event) => void`: Returns a function that swaps the items at `index` with `newIndex`.
 - `readonly`: A boolean value stating if the array item is readonly.
 
+### Error List template
+
+To take control over how the form errors are displayed, you can define an *error list template* for your form.
+
+An error list template is basically a React stateless component being passed errors as props so you can display them as you like:
+
+```jsx
+function CustomErrorListTemplate(props) {
+  const {errors} = props;
+  return (
+    <div>
+      {errors.map((error, i) => {
+        return (
+          <li key={i}>
+            {error.stack}
+          </li>
+        );
+      })}
+    </div>
+  );
+}
+
+render((
+  <Form schema={schema}
+        showErrorList={true}
+        ErrorList={CustomErrorListTemplate} />,
+), document.getElementById("app"));
+```
+
+> Note: Your custom `ErrorList` template will only render when `showErrorList` is `true`.
+
+
 ### Custom widgets and fields
 
 The API allows to specify your own custom *widget* and *field* components:
@@ -1256,6 +1289,8 @@ render((
 ), document.getElementById("app"));
 ```
 
+> Note: you can also use your own [ErrorList](#error-list-template)
+
 ### The case of empty strings
 
 When a text input is empty, the field in form data is set to `undefined`. String fields that use `enum` and a `select` widget work similarly and will have an empty option at the top of the options list that when selected will result in the field being `undefined`.