Skip to content

Commit 0f5bd9d

Browse files
committed
Apply consistent code formatting in README.
1 parent 00dfa23 commit 0f5bd9d

File tree

1 file changed

+70
-27
lines changed

1 file changed

+70
-27
lines changed

README.md

Lines changed: 70 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -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
8688
Source 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
9395
const 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-
119118
const log = (type) => console.log.bind(console, type);
120119

121120
render((
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
141155
const 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+
146165
To react to when submitted form data are invalid, pass an `onError` handler, which is passed the list of encoutered errors:
147166

148167
```js
149168
const 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

368392
render((
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`.
465490
You 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

562591
The 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

604635
This 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

712748
The 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} />);
842882
To 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

Comments
 (0)