galicea

Repositories Projects Packages

4

@galicea-lab/rjsf-widgets (0.1.1)

Published 2026-10-28 08:55:09 +00:00 by jurekw

Installation

Setup this registry in your project .npmrc file:

@galicea-lab:registry=

To install the package using npm, run the following command:

npm install @galicea-lab/rjsf-widgets@0.1.1

or add it to the package.json file:

"@galicea-lab/rjsf-widgets": "0.1.1"

For more information on the npm registry, see the documentation.

About this package

@galicea-lab/rjsf-widgets

Tailwind theme, SchemaForm wrapper and custom widgets for react-jsonschema-form (RJSF), shared across the Galwork apps (arena/dashboard/edu).

Includes:

• SchemaForm - thin wrapper around RJSF's Form wired up with the theme below.
• templates, widgets, defaultTemplates - a Tailwind-styled RJSF theme.
• AsyncSelectWidget / TreeSelectWidget - a combobox widget for fields with a dynamic option source (ui:options.endpoint), with request debouncing and response caching.
• DictionaryProvider - supplies the fetchOptions function AsyncSelectWidget uses to resolve an endpoint, and owns the endpoint+query cache. The host app provides the actual HTTP call (its own API client, auth, base URL), so this package carries no knowledge of any specific backend.

Usage

import { DictionaryProvider, SchemaForm } from '@galicea-lab/rjsf-widgets';
import { dictionariesApi } from '@/api/dictionaries';

function App() {
  return (
    <DictionaryProvider fetchOptions={dictionariesApi.listOptions}>
      <SchemaForm schema={schema} uiSchema={uiSchema} onSubmit={handleSubmit} />
    </DictionaryProvider>
  );
}

DictionaryProvider can wrap the whole app (e.g. in _app.tsx) so the options cache is shared across every form on the page; fetchOptions only needs to match the signature (endpoint: string, q?: string) => Promise<{ value: string; label: string }[]>.

Fields get the custom widgets by setting, in uiSchema:

{ "ui:widget": "AsyncSelectWidget", "ui:options": { "endpoint": "/v1/wf/dictionaries/kierunki" } }

Using only the theme/widgets without SchemaForm

If a host app renders <Form> directly instead of through SchemaForm, import templates/widgets from this package and pass them along with your own RJSF <Form>, still wrapping the tree in DictionaryProvider.

Dependencies

Development dependencies

ID	Version
@iconify/react	^6.0.2
@rjsf/core	^6.1.0
@rjsf/utils	^6.1.0
@rjsf/validator-ajv8	^6.1.0
@types/node	^22.0.0
@types/react	^19.0.0
@types/react-dom	^19.0.0
esbuild	^0.28.2
react	^19.0.0
react-dom	^19.0.0
typescript	^5.0.0

Peer dependencies

ID	Version
@iconify/react	>=5.0.0
@rjsf/core	>=6.0.0
@rjsf/utils	>=6.0.0
@rjsf/validator-ajv8	>=6.0.0
react	>=18
react-dom	>=18

Details

npm

2026-10-28 08:55:09 +00:00

5

Project website

MIT

latest

45 KiB

Assets (1)

rjsf-widgets-0.1.1.tgz 45 KiB

Versions (1) View all

0.1.1 2026-10-28