{"id":14483524,"url":"https://github.com/codegouvfr/rjsf-dsfr","last_synced_at":"2025-10-24T09:30:39.065Z","repository":{"id":245236300,"uuid":"817833106","full_name":"codegouvfr/rjsf-dsfr","owner":"codegouvfr","description":"react-jsonschema-form for the DSFR","archived":false,"fork":false,"pushed_at":"2024-09-20T09:22:27.000Z","size":8006,"stargazers_count":5,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-05T04:48:29.185Z","etag":null,"topics":["dsfr","rjsf"],"latest_commit_sha":null,"homepage":"https://codegouvfr.github.io/rjsf-dsfr","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/codegouvfr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-20T14:30:48.000Z","updated_at":"2024-08-22T08:55:05.000Z","dependencies_parsed_at":"2024-06-20T19:49:22.579Z","dependency_job_id":"bd8abf28-f3ea-4e3a-962b-bf0987f5a351","html_url":"https://github.com/codegouvfr/rjsf-dsfr","commit_stats":{"total_commits":44,"total_committers":3,"mean_commits":"14.666666666666666","dds":0.2954545454545454,"last_synced_commit":"5f782dc3c42ea5310eeac68d57a2f023d42f2abe"},"previous_names":["codegouvfr/rjsf-dsfr"],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frjsf-dsfr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frjsf-dsfr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frjsf-dsfr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frjsf-dsfr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegouvfr","download_url":"https://codeload.github.com/codegouvfr/rjsf-dsfr/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237944079,"owners_count":19391588,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dsfr","rjsf"],"created_at":"2024-09-03T00:01:50.070Z","updated_at":"2025-10-24T09:30:33.719Z","avatar_url":"https://github.com/codegouvfr.png","language":"TypeScript","readme":"# React JSON Schema Form with the DSFR\n\nThis is a wrapper around the\n[react-jsonschema-form](https://rjsf-team.github.io/react-jsonschema-form/docs/)\nwith the components from\n[`react-dsfr`](https://github.com/codegouvfr/react-dsfr).\n\n\u003e [!IMPORTANT]\n\u003e For now, this is simply extracted code from\n\u003e [`catala-dsfr`](https://github.com/CatalaLang/catala-dsfr).\n\u003e Therefore, the API is not yet defined and and is likely to be not flexible\n\u003e enough for your use case.\n\u003e\n\u003e If you want to use this library, please [open an\n\u003e issue](https://github.com/codegouvfr/rjsf-dsfr/issues) to discuss your needs!\n\n👉 See a demo at : https://codegouvfr.github.io/rjsf-dsfr\n\n## Installation\n\n```bash\nyarn add @codegouvfr/rjsf-dsfr\n```\n\n## Usage\n\nFor now, the API matches the one from `react-jsonschema-form` and you can\noverrides some widgets (resp. templates) by specifying them in the props.\n\n```tsx\nimport { RJSFSchema } from '@rjsf/utils'\nimport FormDSFR from '@codegouvfr/rjsf-dsfr'\nimport { customizeValidator } from '@rjsf/validator-ajv8'\nimport frenchLocalizer from 'ajv-i18n/localize/fr'\n\nconst validator = customizeValidator({}, frenchLocalizer)\n\nconst schema: RJSFSchema = {\n  type: 'object',\n  properties: {\n    nom: { title: 'Nom', type: 'string', minLength: 2 },\n    prenom: { title: 'Prénom', type: 'string' },\n    ddn: { title: 'Date de naissance', type: 'string', format: 'date' },\n  },\n  required: ['nom'],\n}\n\nexport default function Form() {\n  return \u003cFormDSFR schema={schema} validator={validator} /\u003e\n}\n```\n\n## Notes on writing schemas\n\n### Title\n\nThe titles must not be defined inside `\"kind\"` properties of the object\ndefinition but just before the `\"$ref\"` of the calling parent:\n\n```json\n\"categorieEquivalenceLoyerD84216\": {\n  \"title\": \"Catégorie de personnes résidant en logement-foyer\",\n  \"$ref\": \"#/definitions/categorie_equivalence_loyer_allocation_logement_foyer\"\n}\n```\n\n### UI Options\n\nAs described in the [react-jsonschema-form\ndocumentation](https://rjsf-team.github.io/react-jsonschema-form/docs/api-reference/uiSchema),\nyou can customize the form by providing a `uiSchema`.\nIn addition to the standard options, you can use the following specific options\nfor `rjsf-dsfr`.\n\n\u003e [!TIP]\n\u003e You can have a look to a real world example\n\u003e [here](https://github.com/CatalaLang/catala-web-assets/blob/main/assets/aides_logement_ui_fr.schema.jsx)\n\n#### Global field options\n\nThe following options can be set for any field in the `uiSchema`:\n\n- `ui:heading`: set the heading level for the field's title (available values: `h2`, `h3`, `h4`, `h5`, `h6`)\n- `ui:hideTitle`: hide the field's title.\n\n#### Specific field options\n\n##### Array fields\n\nThe following options can be set for fields of type `array`:\n\n- `ui:addIcon`: set the [DSFR icon id](https://react-dsfr.codegouv.studio/icons) for the _Add_ button\n- `ui:removeIcon`: set the [DSFR icon id](https://react-dsfr.codegouv.studio/icons) for the _Remove_ button\n- `ui:tabLabel`: set the label for the tab in the array field (it needs to be\n  defined at the root of the `array` field)\n\n\u003e [!NOTE]\n\u003e By default, array fields are displayed in a\n\u003e [`Tabs`](https://components.react-dsfr.codegouv.studio/?path=/docs/components-tabs--default)\n\u003e component. Each tab is labeled with the `ui:tabLabel` value and the last tab\n\u003e contains the _Add_ button.\n\n\u003e [!IMPORTANT]\n\u003e The `ui:hideTitle` option it's needed for items of type `object` inside a\n\u003e field of type `array` to hide the unique title of the array's items.\n\u003e\n\u003e Example:\n\u003e\n\u003e ```json\n\u003e \"personnesACharge\": {\n\u003e    \"ui:tabLabel\": \"Personne\",\n\u003e    \"items\": {\n\u003e        \"ui:hideTitle\": true,\n\u003e ...\n\u003e ```\n\n## Development\n\nLaunch the playground to play with the DSFR theme :\n\n```sh\ncd demo\nyarn\nyarn start\n```\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Frjsf-dsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegouvfr%2Frjsf-dsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Frjsf-dsfr/lists"}