@@ -15,8 +15,10 @@ A [live playground](https://mozilla-services.github.io/react-jsonschema-form/) i
1515 -  [ As a npm-based project dependency] ( #as-a-npm-based-project-dependency ) 
1616 -  [ As a script served from a CDN] ( #as-a-script-served-from-a-cdn ) 
1717 -  [ Usage] ( #usage ) 
18+  -  [ Form initialization] ( #form-initialization ) 
1819 -  [ Form event handlers] ( #form-event-handlers ) 
1920 -  [ Form submission] ( #form-submission ) 
21+  -  [ Form error event handler] ( #form-error-event-handler ) 
2022 -  [ Form data changes] ( #form-data-changes ) 
2123 -  [ Form customization] ( #form-customization ) 
2224 -  [ The uiSchema object] ( #the-uischema-object ) 
@@ -86,11 +88,13 @@ $ npm install react-jsonschema-form --save
8688Source maps are available at [ this url] ( https://npmcdn.com/react-jsonschema-form/dist/react-jsonschema-form.js.map ) .
8789
8890>  Note: The CDN version ** does not**  embed * react*  nor * react-dom* .
89- 
91+ > 
9092>  You'll also need to alias the default export property to use the Form component:
9193
9294``` jsx 
9395const  Form  =  JSONSchemaForm .default ;
96+ //  or
97+ const  {default:  Form } =  JSONSchemaForm;
9498``` 
9599
96100## Usage  
@@ -111,16 +115,10 @@ const schema = {
111115 }
112116};
113117
114- const  formData  =  {
115-  title:  " First task" 
116-  done:  true 
117- };
118- 
119118const  log  =  (type ) =>  console .log .bind (console , type);
120119
121120render ((
122121 < Form schema= {schema}
123-  formData= {formData}
124122 onChange= {log (" changed" 
125123 onSubmit= {log (" submitted" 
126124 onError= {log (" errors" / > 
@@ -131,6 +129,22 @@ That should give something like this (if you took care of loading the standard [
131129
132130![ ] ( http://i.imgur.com/DZQYPyu.png ) 
133131
132+ ### Form initialization  
133+ 
134+ Often you'll want to prefill a form with existing data; this is done by passing a ` formData `  prop object matching the schema:
135+ 
136+ ``` jsx 
137+ const  formData  =  {
138+  title:  " First task" 
139+  done:  true 
140+ };
141+ 
142+ render ((
143+  < Form schema= {schema}
144+  formData= {formData}
145+ ), document .getElementById (" app" 
146+ ``` 
147+ 
134148### Form event handlers  
135149
136150#### Form submission  
@@ -140,15 +154,23 @@ You can pass a function as the `onSubmit` prop of your `Form` component to liste
140154``` js 
141155const  onSubmit  =  ({formData}) =>  console .log (" yay I'm valid!" 
142156
143- < Form schema= {schema} onSubmit= {onSubmit} / > ;
157+ render ((
158+  < Form schema= {schema}
159+  onSubmit= {onSubmit} / > 
160+ ), document .getElementById (" app" 
144161``` 
145162
163+ #### Form error event handler  
164+ 
146165To react to when submitted form data are invalid, pass an ` onError `  handler, which is passed the list of encoutered errors:
147166
148167``` js 
149168const  onError  =  (errors ) =>  console .log (" I have" errors .length , " errors to fix" 
150169
151- < Form schema= {schema} onError= {onError} / > ;
170+ render ((
171+  < Form schema= {schema}
172+  onError= {onError} / > 
173+ ), document .getElementById (" app" 
152174``` 
153175
154176#### Form data changes  
@@ -205,8 +227,10 @@ const uiSchema = {
205227 }
206228}
207229
208- render (< Form schema= {schema} uiSchema= {uiSchema} / > ,
209-  document .getElementById (" app" 
230+ render ((
231+  < Form schema= {schema}
232+  uiSchema= {uiSchema} / > 
233+ ), document .getElementById (" app" 
210234``` 
211235
212236### Alternative widgets  
@@ -366,7 +390,8 @@ const uiSchema = {
366390};
367391
368392render ((
369-  < Form schema= {schema} uiSchema= {uiSchema} / > 
393+  < Form schema= {schema}
394+  uiSchema= {uiSchema} / > 
370395), document .getElementById (" app" 
371396``` 
372397
@@ -465,13 +490,14 @@ So all widgets will have an id prefixed with `myform`.
465490You can provide custom buttons to your form via the ` Form `  component's ` children ` . A default submit button will be rendered if you don't provide children to the ` Form `  component.
466491
467492``` jsx 
468- render (
493+ render (( 
469494 < Form schema= {schema}> 
470495 < div> 
471496 < button type= " submit" > Submit< / button> 
472497 < button> Cancel< / button> 
473498 < / div> 
474-  < / Form> );
499+  < / Form> 
500+ ), document .getElementById (" app" 
475501``` 
476502
477503** Warning:**  there should be a button or an input with ` type="submit" `  to trigger the form submission (and then the form validation).
@@ -556,7 +582,10 @@ const uiSchema = {
556582 }
557583};
558584
559- render (< Form schema= {schema} uiSchema= {uiSchema} / > );
585+ render ((
586+  < Form schema= {schema}
587+  uiSchema= {uiSchema} / > ,
588+ ), document .getElementById (" app" 
560589``` 
561590
562591The following props are passed to custom widget components:
@@ -595,10 +624,12 @@ const uiSchema = {
595624 " ui:widget" :  " myCustomWidget" 
596625}
597626
598- render (< Form
599-  schema= {schema}
600-  uiSchema= {uiSchema}
601-  widgets= {widgets} / > );
627+ render ((
628+  < Form
629+  schema= {schema}
630+  uiSchema= {uiSchema}
631+  widgets= {widgets} / > 
632+ ), document .getElementById (" app" 
602633``` 
603634
604635This is useful if you expose the ` uiSchema `  as pure JSON, which can't carry functions.
@@ -626,7 +657,10 @@ const uiSchema = {
626657 }
627658};
628659
629- render (< Form schema= {schema} uiSchema= {uiSchema} / > );
660+ render ((
661+  < Form schema= {schema}
662+  uiSchema= {uiSchema} / > 
663+ ), document .getElementById (" app" 
630664``` 
631665
632666>  Note: This also applies to [ registered custom components] ( #custom-component-registration ) .
@@ -682,13 +716,15 @@ const fields = {geo: GeoPosition};
682716
683717//  Render the form with all the properties we just defined passed
684718//  as props
685- render (< Form
686-  schema= {schema}
687-  uiSchema= {uiSchema}
688-  fields= {fields} / > );
719+ render ((
720+  < Form
721+  schema= {schema}
722+  uiSchema= {uiSchema}
723+  fields= {fields} / > 
724+ ), document .getElementById (" app" 
689725``` 
690726
691- Note: Registered fields can be reused accross the entire schema.
727+ >  Note: Registered fields can be reused accross the entire schema.
692728
693729#### Field props  
694730
@@ -710,6 +746,7 @@ The `registry` is an object containing the registered custom fields and widgets
710746 -  ` definitions ` : The root schema [ definitions] ( #schema-definitions-and-references ) , if any.
711747
712748The registry is passed down the component tree, so you can access it from your custom field and ` SchemaField `  components.
749+ 
713750### Custom SchemaField  
714751
715752** Warning:**  This is a powerful feature as you can override the whole form behavior and easily mess it up. Handle with care.
@@ -829,7 +866,10 @@ const schema = {
829866 } 
830867}; 
831868
832- render(<Form schema={schema} validate={validate} />); 
869+ render(( 
870+  <Form schema={schema} 
871+  validate={validate} /> 
872+ ), document.getElementById("  app" ));
833873``` 
834874
835875> Notes: 
@@ -842,7 +882,10 @@ render(<Form schema={schema} validate={validate} />);
842882To disable rendering of the error list at the top of the form, you can set the `showErrorList` prop to `false`. Doing so will still validate the form, but only the inline display will show. 
843883
844884```js 
845- render(<Form schema={schema} showErrorList={false}/>); 
885+ render(( 
886+  <Form schema={schema} 
887+  showErrorList={false}/> 
888+ ), document.getElementById("  app" ));
846889``` 
847890
848891## Styling your forms 
0 commit comments