UI Schema Examples

Advanced usages and examples for @ui-schema/react in TypeScript, with @mui, see demo-cra for simpler non-TS examples.

Files in src:

• main.tsx provider setup, e.g. UIMetaProvider
• routes.ts
• App.tsx layout and router setup
• components/UISchema.tsx UI-Schema binding setup
• example pages:
  • pages/PageSimpleForm.tsx, automatic rendered, usage of WidgetCountrySelect
  • pages/PageCustomForm.tsx, custom rendered, usage of WidgetCountrySelect
  • pages/PageCustomUpload.tsx, custom rendered, native file upload widget
  • pages/PageRefForm.tsx, example of $ref with embedded $defs
  • pages/PageRefRemoteForm.tsx, example of $ref with loading remote schema resources
• widget in: Widgets/
  • WidgetCountrySelect.tsx, uses an API to populate the Select options

Run on CodeSandbox or StackBlitz.

Explore more:

• Quick Start
• Core Project

Setup

Install dependencies:

npm i

Start dev server:

npm start

Create bundle:

npm run build

For tests first install a playwright browser:

npx playwright install chromium --with-deps

Then run tests:

npm test

Or run tests in watch mode:

npm run tdd