|
| 1 | +[![Build Status][build-shield]][build-url] |
| 2 | +[![npm][npm-shield]][npm-url] |
| 3 | +[![npm downloads][npm-dl-shield]][npm-dl-url] |
| 4 | +[![Contributors][contributors-shield]][contributors-url] |
| 5 | +[![Apache 2.0 License][license-shield]][license-url] |
| 6 | + |
| 7 | +<!-- PROJECT LOGO --> |
| 8 | +<br /> |
| 9 | +<p align="center"> |
| 10 | + <a href="https://github.com/rjsf-team/react-jsonschema-form"> |
| 11 | + <img src="./logo.png" alt="Logo" width="340"> |
| 12 | + </a> |
| 13 | + |
| 14 | + <h3 align="center">@rjsf/rjsf-chakra-ui</h3> |
| 15 | + |
| 16 | + <p align="center"> |
| 17 | + Chakra UI theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>. |
| 18 | + <br /> |
| 19 | + <a href="https://react-jsonschema-form.readthedocs.io/en/latest/"><strong>Explore the docs »</strong></a> |
| 20 | + <br /> |
| 21 | + <br /> |
| 22 | + <a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a> |
| 23 | + · |
| 24 | + <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a> |
| 25 | + · |
| 26 | + <a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a> |
| 27 | + </p> |
| 28 | +</p> |
| 29 | + |
| 30 | +<!-- TABLE OF CONTENTS --> |
| 31 | + |
| 32 | +## Table of Contents |
| 33 | + |
| 34 | +- [Table of Contents](#table-of-contents) |
| 35 | +- [About The Project](#about-the-project) |
| 36 | + - [Built With](#built-with) |
| 37 | +- [Getting Started](#getting-started) |
| 38 | + - [Prerequisites](#prerequisites) |
| 39 | + - [Installation](#installation) |
| 40 | +- [Usage](#usage) |
| 41 | +- [Roadmap](#roadmap) |
| 42 | +- [Contributing](#contributing) |
| 43 | +- [Contact](#contact) |
| 44 | + |
| 45 | +<!-- ABOUT THE PROJECT --> |
| 46 | + |
| 47 | +## About The Project |
| 48 | + |
| 49 | +[![@rjsf/chakra-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/chakra-ui) |
| 50 | + |
| 51 | +Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`. |
| 52 | + |
| 53 | +### Built With |
| 54 | + |
| 55 | +- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/) |
| 56 | +- [Chakra UI](https://chakra-ui.com/) |
| 57 | +- [TypeScript](https://www.typescriptlang.org/) |
| 58 | + |
| 59 | +<!-- GETTING STARTED --> |
| 60 | + |
| 61 | +## Getting Started |
| 62 | + |
| 63 | +### Prerequisites |
| 64 | + |
| 65 | +- `@chakra-ui/react >= 1.7.0` |
| 66 | +- `react >= 16.0.0` |
| 67 | +- `@rjsf/core >= 2.0.0` |
| 68 | + |
| 69 | +```bash |
| 70 | +yarn add @chakra-ui/react |
| 71 | +``` |
| 72 | + |
| 73 | +### Installation |
| 74 | + |
| 75 | +```bash |
| 76 | +yarn add @rsjf/chakra-ui @rsjf/core |
| 77 | +``` |
| 78 | + |
| 79 | +<!-- USAGE EXAMPLES --> |
| 80 | + |
| 81 | +## Usage |
| 82 | + |
| 83 | +```js |
| 84 | +import Form from "@rsjf/chakra-ui"; |
| 85 | +``` |
| 86 | + |
| 87 | +or |
| 88 | + |
| 89 | +```js |
| 90 | +import { withTheme } from "@rjsf/core"; |
| 91 | +import { Theme as ChakraUITheme } from "@rsjf/chakra-ui"; |
| 92 | + |
| 93 | +// Make modifications to the theme with your own fields and widgets |
| 94 | + |
| 95 | +const Form = withTheme(ChakraUITheme); |
| 96 | +``` |
| 97 | + |
| 98 | +<!-- ROADMAP --> |
| 99 | + |
| 100 | +## Roadmap |
| 101 | + |
| 102 | +See the [open issues](https://github.com/rjsf-team/react-jsonschema-form/issues) for a list of proposed features (and known issues). |
| 103 | + |
| 104 | +<!-- CONTRIBUTING --> |
| 105 | + |
| 106 | +## Contributing |
| 107 | + |
| 108 | +Read our [contributors' guide](https://react-jsonschema-form.readthedocs.io/en/latest/contributing/) to get started. |
| 109 | + |
| 110 | +<!-- CONTACT --> |
| 111 | + |
| 112 | +## Contact |
| 113 | + |
| 114 | +rjsf team: [https://github.com/orgs/rjsf-team/people](https://github.com/orgs/rjsf-team/people) |
| 115 | + |
| 116 | +GitHub repository: [https://github.com/rjsf-team/react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form) |
| 117 | + |
| 118 | +<!-- MARKDOWN LINKS & IMAGES --> |
| 119 | +<!-- https://www.markdownguide.org/basic-syntax/#reference-style-links --> |
| 120 | + |
| 121 | +[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg |
| 122 | +[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions |
| 123 | +[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg |
| 124 | +[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors |
| 125 | +[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square |
| 126 | +[license-url]: https://choosealicense.com/licenses/apache-2.0/ |
| 127 | +[npm-shield]: https://img.shields.io/npm/v/@rjsf/material-ui/latest.svg?style=flat-square |
| 128 | +[npm-url]: https://www.npmjs.com/package/@rjsf/material-ui |
| 129 | +[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/material-ui.svg?style=flat-square |
| 130 | +[npm-dl-url]: https://www.npmjs.com/package/@rjsf/material-ui |
| 131 | +[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/material-ui/screenshot.png |
0 commit comments