Custom Arrays

README.md

@@ -470,6 +470,34 @@ const uiSchema = {
 };
 ```
 
+#### `render` option
+
+A `render` function can be passed which will customize how the array is rendered. Several methods are exposed that can be called in your custom element.
+
+```jsx
+const uiSchema = {
+  "ui:options":  {
+    render: props => <div>{props.children}</div>
+  }
+};
+```
+
+Please see [customArray.js](https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customArray.js) for a better example.
+
+#### `renderItem` option
+
+A `renderItem` function can be passed which will customize how each item in the array is rendered. Several methods are exposed that can be called in your custom element.
+
+```jsx
+const uiSchema = {
+  "ui:options":  {
+    renderItem: props => <div>{props.children}</div>
+  }
+};
+```
+
+Please see [customArray.js](https://github.com/mozilla-services/react-jsonschema-form/blob/master/playground/samples/customArray.js) for a better example.
+
 ### Custom CSS class names
 
 The uiSchema object accepts a `classNames` property for each field of the schema:

playground/samples/customArray.js

@@ -0,0 +1,37 @@
+import React, { Component } from "react";
+
+const render = props => {
+  return (
+    <div className={props.className}>
+      {props.children}
+      <button onClick={props.onAddClick}>Plus</button>
+    </div>
+  );
+};
+
+const renderItem = props => {
+  return (
+    <div className={props.className} key={props.index}>
+      {props.hasMoveDown &&
+        <button onClick={props.onReorderClick(props.index, props.index + 1)}>Down</button>}
+      {props.hasMoveUp &&
+        <button onClick={props.onReorderClick(props.index, props.index - 1)}>Up</button>}
+      <button onClick={props.onDropIndexClick(props.index)}>Delete</button>
+      {props.children}
+    </div>
+  );
+};
+
+module.exports = {
+  schema: {
+    title: "Custom array of strings",
+    type: "array",
+    items: {
+      type: "string"
+    }
+  },
+  uiSchema: {
+    "ui:options": { render, renderItem }
+  },
+  formData: ["react", "jsonschema", "form"]
+};

playground/samples/index.js

@@ -12,6 +12,7 @@ import date from "./date";
 import validation from "./validation";
 import files from "./files";
 import single from "./single";
+import customArray from "./customArray";
 
 export const samples = {
   Simple: simple,
@@ -27,5 +28,6 @@ export const samples = {
   "Date & time": date,
   Validation: validation,
   Files: files,
-  Single: single
-};
+  Single: single,
+  "Custom Array": customArray
+};