|
1 | 1 | # react-jsonschema-form |
2 | 2 |
|
3 | | - |
| 3 | +The react-jsonschema-form docs have been moved [here](https://rjsf-team.github.io/react-jsonschema-form/docs). |
4 | 4 |
|
5 | | -A simple [React](https://reactjs.org/) component capable of building HTML forms out of a [JSON schema](http://json-schema.org/). |
6 | | - |
7 | | -A [live playground](https://rjsf-team.github.io/react-jsonschema-form/) is hosted on GitHub Pages: |
8 | | - |
9 | | -<a target="_blank" href="https://rjsf-team.github.io/react-jsonschema-form/"><img alt="Playground" src="https://i.imgur.com/M8ZCES5.gif" /></a> |
10 | | - |
11 | | -## Philosophy |
12 | | - |
13 | | -react-jsonschema-form is meant to automatically generate a React form based on a [JSON Schema](http://json-schema.org/). If you want to generate a form for any data, sight unseen, simply given a JSON schema, react-jsonschema-form may be for you. If you have _a priori_ knowledge of your data and want a toolkit for generating forms for it, you might look elsewhere. |
14 | | - |
15 | | -react-jsonschema-form also comes with tools such as `uiSchema` and other form props to customize the look and feel of the form beyond the default themes. |
16 | | - |
17 | | -## Installation |
18 | | - |
19 | | -First install the dependencies from npm, along with a validator implementation (such as `@rjsf/validator-ajv8`): |
20 | | - |
21 | | -```bash |
22 | | -$ npm install @rjsf/core @rjsf/utils @rjsf/validator-ajv8 --save |
23 | | -``` |
24 | | - |
25 | | -Then import the dependencies as follows: |
26 | | - |
27 | | -```js |
28 | | -import validator from "@rjsf/validator-ajv8"; |
29 | | -import Form from "@rjsf/core"; |
30 | | -``` |
31 | | - |
32 | | -Our latest version requires React 16+. You can also install `react-jsonschema-form` (the 1.x version) which works with React 15+. |
33 | | - |
34 | | -### As a script served from a CDN |
35 | | - |
36 | | -```html |
37 | | - <script src="https://unpkg.com/@rjsf/core/dist/core.cjs.production.min.js"></script> |
38 | | -``` |
39 | | - |
40 | | -Source maps are available at [this url](https://unpkg.com/@rjsf/core/dist/core.cjs.production.min.js.map). |
41 | | - |
42 | | -> Note: The CDN version **does not** embed `react` or `react-dom`. If you want other distributions (i.e. umd, esm), look [here](https://unpkg.com/@rjsf/core/dist/) for all releases |
43 | | -
|
44 | | -You'll also need to alias the default export property to use the Form component: |
45 | | - |
46 | | -```js |
47 | | -const Form = JSONSchemaForm.default; |
48 | | -// or |
49 | | -const {default: Form} = JSONSchemaForm; |
50 | | -``` |
51 | | - |
52 | | -## Usage |
53 | | - |
54 | | -```tsx |
55 | | -import { RJSFSchema } from "@rjsf/utils"; |
56 | | -import validator from "@rjsf/validator-ajv8"; |
57 | | - |
58 | | -const schema: RJSFSchema = { |
59 | | - title: "Todo", |
60 | | - type: "object", |
61 | | - required: ["title"], |
62 | | - properties: { |
63 | | - title: {type: "string", title: "Title", default: "A new task"}, |
64 | | - done: {type: "boolean", title: "Done?", default: false} |
65 | | - } |
66 | | -}; |
67 | | - |
68 | | -const log = (type) => console.log.bind(console, type); |
69 | | - |
70 | | -render(( |
71 | | - <Form schema={schema} |
72 | | - validator={validator} |
73 | | - onChange={log("changed")} |
74 | | - onSubmit={log("submitted")} |
75 | | - onError={log("errors")} /> |
76 | | -), document.getElementById("app")); |
77 | | -``` |
78 | | - |
79 | | - |
80 | | -## Theming |
81 | | - |
82 | | -For more information on what themes we support, see [Using Themes](usage/themes). |
83 | | - |
84 | | - |
85 | | -<!-- |
86 | | -
|
87 | | -disabled until https://github.com/rjsf-team/react-jsonschema-form/issues/1584 is resolved |
88 | | -
|
89 | | -## Useful samples |
90 | | -
|
91 | | - - Custom field template: <https://jsfiddle.net/hdp1kgn6/1/> |
92 | | - - Multi-step wizard: <https://jsfiddle.net/sn4bnw9h/1/> |
93 | | - - Using classNames with uiSchema: <https://jsfiddle.net/gfwp25we/1/> |
94 | | - - Conditional fields: <https://jsfiddle.net/69z2wepo/88541/> |
95 | | - - Advanced conditional fields: <https://jsfiddle.net/cowbellerina/zbfh96b1/> |
96 | | - - Use radio list for enums: <https://jsfiddle.net/f2y3fq7L/2/> |
97 | | - - Reading file input data: <https://jsfiddle.net/f9vcb6pL/1/> |
98 | | - - Custom errors messages with transformErrors: <https://jsfiddle.net/revolunet/5r3swnr4/> |
99 | | - - 2 columns form with CSS and FieldTemplate: <https://jsfiddle.net/n1k0/bw0ffnz4/1/> |
100 | | - - Validate and submit form from external control: <https://jsfiddle.net/spacebaboon/g5a1re63/> |
101 | | - - Custom component for Help text with `ui:help`: <https://codesandbox.io/s/14pqx97xl7/> |
102 | | - - Collapsing / Showing and Hiding individual fields: <https://codesandbox.io/s/examplereactjsonschemaformcollapsefieldtemplate-t41dn> |
103 | | -
|
104 | | ---> |
105 | | - |
106 | | -## License |
107 | | - |
108 | | -Apache 2 |
109 | | - |
110 | | - |
111 | | -## Credits |
112 | | - |
113 | | -| <img style="height: 100px !important" src="https://avatars1.githubusercontent.com/u/1066228?s=200&v=4"> | <img style="height: 100px !important" src="https://user-images.githubusercontent.com/1689183/51487090-4ea04f80-1d57-11e9-9a91-79b7ef8d2013.png"></a> | <img style="height: 100px !important" src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" /> | |
114 | | -|---|---|---| |
115 | | -|This project initially started as a [mozilla-services](https://github.com/mozilla-services) project. |Testing is powered by [BrowserStack](https://www.browserstack.com/).|Deploy Previews are provided by [Netlify](https://www.netlify.com).| |
116 | | - |
117 | | -## Who uses react-jsonschema-form? |
118 | | - |
119 | | -- ... |
120 | | - |
121 | | -Add your own company / organization by making a [pull request](https://github.com/rjsf-team/react-jsonschema-form/pulls). |
| 5 | +We are in the process of migrating our versioned documentation. For documentation prior to version 5.0.0, please select the version in the bottom-right corner of this page. |
0 commit comments