Add support for rows attribute of textarea widget.

README.md

@@ -46,6 +46,7 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
      - [Form action buttons](#form-action-buttons)
      - [Help texts](#help-texts)
      - [Auto focus](#auto-focus)
+     - [Textarea rows option](#textarea-rows-option)
      - [Placeholders](#placeholders)
      - [Form attributes](#form-attributes)
   - [Advanced customization](#advanced-customization)
@@ -641,6 +642,20 @@ const uiSchema = {
 }
 ```
 
+### Textarea `rows` option
+
+You can set initial height of a textarea widget by specifying `rows` option.
+
+```js
+const schema = {type: "string"};
+const uiSchema = {
+  "ui:widget": "textarea",
+  "ui:options": {
+    rows: 15
+  }
+}
+```
+
 ### Placeholders
 
 Text fields can benefit from placeholders by using the `ui:placeholder` uiSchema directive:
@@ -1185,7 +1200,7 @@ render((
 
 ### Custom error messages
 
-Validation error messages are provided by the JSON Schema validation by default. If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list. 
+Validation error messages are provided by the JSON Schema validation by default. If you need to change these messages or make any other modifications to the errors from the JSON Schema validation, you can define a transform function that receives the list of JSON Schema errors and returns a new list.
 
 ```js
 function transformErrors(errors) {

playground/samples/widgets.js

@@ -95,7 +95,10 @@ module.exports = {
     },
     string: {
       textarea: {
-        "ui:widget": "textarea"
+        "ui:widget": "textarea",
+        "ui:options": {
+          rows: 5
+        }
       },
       color: {
         "ui:widget": "color"

src/components/widgets/TextareaWidget.js

@@ -4,6 +4,7 @@ import React, {PropTypes} from "react";
 function TextareaWidget({
   schema,
   id,
+  options,
   placeholder,
   value,
   required,
@@ -15,7 +16,7 @@ function TextareaWidget({
 }) {
   const _onChange = ({target: {value}}) => {
     return onChange(value === "" ? undefined : value);
-  };  
+  };
   return (
     <textarea
       id={id}
@@ -26,20 +27,25 @@ function TextareaWidget({
       disabled={disabled}
       readOnly={readonly}
       autoFocus={autofocus}
+      rows={options.rows}
       onBlur={onBlur && (event => onBlur(id, event.target.value))}
-      onChange={_onChange} />
+      onChange={_onChange}/>
   );
 }
 
 TextareaWidget.defaultProps = {
-  autofocus: false
+  autofocus: false,
+  options: {}
 };
 
 if (process.env.NODE_ENV !== "production") {
   TextareaWidget.propTypes = {
     schema: PropTypes.object.isRequired,
     id: PropTypes.string.isRequired,
     placeholder: PropTypes.string,
+    options: PropTypes.shape({
+      rows: PropTypes.number
+    }),
     value: PropTypes.string,
     required: PropTypes.bool,
     autofocus: PropTypes.bool,

test/StringField_test.js

@@ -89,7 +89,7 @@ describe("StringField", () => {
 
       expect(onBlur.calledWith(input.id, "yo")).to.be.true;
     });
-    
+
     it("should handle an empty string change event", () => {
       const {comp, node} = createFormComponent({
         schema: {type: "string"},
@@ -243,6 +243,19 @@ describe("StringField", () => {
 
       expect(comp.state.formData).eql(undefined);
     });
+
+    it("should render a textarea field with rows", () => {
+      const {node} = createFormComponent({
+        schema: {type: "string"},
+        uiSchema: {
+          "ui:widget": "textarea",
+          "ui:options": {rows: 20}
+        },
+        formData: "x",
+      });
+
+      expect(node.querySelector("textarea").getAttribute("rows")).eql("20");
+    });
   });
 
   describe("DateTimeWidget", () => {