{"id":19850350,"url":"https://github.com/codegouvfr/rescript-react-dsfr","last_synced_at":"2025-08-10T04:34:00.585Z","repository":{"id":216674902,"uuid":"740988386","full_name":"codegouvfr/rescript-react-dsfr","owner":"codegouvfr","description":"🇫🇷 ReScript bindings for react-dsfr","archived":false,"fork":false,"pushed_at":"2024-01-31T16:00:03.000Z","size":146,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-28T23:11:31.083Z","etag":null,"topics":["design-system","dsfr","react","rescript"],"latest_commit_sha":null,"homepage":"https://react-dsfr.codegouv.studio/","language":"ReScript","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}},"created_at":"2024-01-09T13:30:13.000Z","updated_at":"2024-01-11T15:16:27.000Z","dependencies_parsed_at":"2024-01-11T23:23:12.490Z","dependency_job_id":"ccef218d-27f4-48f7-a602-824b9f5e9d91","html_url":"https://github.com/codegouvfr/rescript-react-dsfr","commit_stats":null,"previous_names":["codegouvfr/rescript-react-dsfr"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/codegouvfr/rescript-react-dsfr","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frescript-react-dsfr","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frescript-react-dsfr/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frescript-react-dsfr/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frescript-react-dsfr/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codegouvfr","download_url":"https://codeload.github.com/codegouvfr/rescript-react-dsfr/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codegouvfr%2Frescript-react-dsfr/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269677393,"owners_count":24457848,"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","status":"online","status_checked_at":"2025-08-10T02:00:08.965Z","response_time":71,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["design-system","dsfr","react","rescript"],"created_at":"2024-11-12T13:25:37.708Z","updated_at":"2025-08-10T04:34:00.552Z","avatar_url":"https://github.com/codegouvfr.png","language":"ReScript","readme":"\u003cdiv align=\"center\"\u003e\n  \u003ch3 align=\"center\"\u003e\n\t\u003cbig\u003e\u003ccode\u003erescript-react-dsfr\u003c/code\u003e\u003c/big\u003e\n  \u003c/h3\u003e\n  \u003cp align=\"center\"\u003e\n   \u003ca href=\"https://github.com/codegouvfr/rescript-react-dsfr/issues\"\u003eReport Bug\u003c/a\u003e\n   •\n   \u003ca href=\"https://github.com/codegouvfr/react-dsfr\"\u003e\u003ccode\u003ereact-dsfr\u003c/code\u003e\u003c/a\u003e\n   •\n   \u003ca href=\"https://components.react-dsfr.codegouv.studio/\"\u003eComponents API\u003c/a\u003e\n  \u003c/p\u003e\n\n![Static Badge](https://img.shields.io/badge/%40codegouvfr%2Freact--dsfr-v1.2.1-blue)\n\n🇫🇷 ReScript bindings for the\n[`react-dsfr`](https://github.com/codegouvfr/react-dsfr) TS library.\n\n\u003c/div\u003e\n\n\u003e [!IMPORTANT]\n\u003e This project has only been tested for the needs of the\n\u003e [`catala-dsfr`](https://github.com/CatalaLang/catala-dsfr) project.\n\n## Installation\n\n```sh\nyarn add @codegouvfr/rescript-react-dsfr\n```\n\nThen add it to `bsconfig.json`:\n\n```diff\n\"bs-dependencies\": [\n+  \"@codegouvfr/rescript-react-dsfr\"\n]\n```\n\n## Usage\n\n\u003e [!TIP]\n\u003e You can look a the [demo web\n\u003e app](https://github.com/codegouvfr/rescript-react-dsfr/tree/main/demo) or at\n\u003e a real-world example in the\n\u003e [`catala-dsfr`](https://github.com/CatalaLang/catala-dsfr) repository.\n\n### Start a DSFR app\n\n```rescript\nDSFR.Spa.startReactDsfr({\n  defaultColorScheme: #system,\n  link: Link.make,\n  useLang: () =\u003e #fr,\n})\n```\n\n### Use a component\n\nThe API should be straightforward to use as it try to match as closely as\npossible the original API. At the difference that constants strings are\nreplaced by polymorphic variants and that reserved keywords in ReScript like\n`type` or `as` are suffixed with an `_` (e.g. `type_` or `as_`).\n\nFor example, for the `Badge` component:\n```typescript\n// In a .tsx file\n\nimport { Badge } from '@codegouvfr/react-dsfr/badge'\n\nlet button = (\n    \u003cBadge type=\"info\" as=\"span\" noIcon={true} severity=\"new\"\u003e\n       Nouveau \n    \u003c/Badge\u003e\n)\n```\n\n```rescript\nopen DSFR\n\n// In a .res file\nlet button = (\n    \u003cBadge type=#info as_=#span noIcon=true severity=#new\u003e\n        {React.string(\"Nouveau\")}\n    \u003c/Badge\u003e\n)\n```\n\n### Use the `cx` function\n\nThe `DSFR.Fr.cx` function is used to generate class names from an array of\nvariants. It allows to type check the class names and provides suggestions\nfrom you IDE.\n\n```rescript\nopen DSFR\n\nlet e = \n    \u003cdiv className={Fr.cx([#\"fr-grid-row\", #\"fr-grid-row--center\"])}\u003e\n        //...\n    \u003c/div\u003e\n```\n\n## Scripts\n\nPolymorphic variants for class names `./src/DSFR__ClassNames.res` (such as\nicon's id or color variants) are generated from the `@codegouvfr/react-dsfr`\nsource code. To update them, run:\n\n```sh\nyarn generate-classNames\n\n# or it will be run automatically when installing the package\nyarn \n```\n\n\u003e [!IMPORTANT]\n\u003e This script is run with [`bun`](https://bun.sh/) and it can be installed with\n\u003e `yarn` so you need to install it manually if you don't have it\n\n## Status\n\n\u003e [!WARNING]\n\u003e Bindings are created by hand, looking at the\n\u003e [storybook](https://components.react-dsfr.codegouv.studio/). Therefore, _a\n\u003e minima_ all the API described in the storybook should be available but it is\n\u003e possible that some props are missing or that some props are not typed\n\u003e correctly.\n\u003e \n\u003e Do not hesitate to open an issue or a PR if you find something.\n\n✅ Implemented | ❌ Not implemented | 🚧 In progress\n\n| Component             | Status |\n| ---------             | :----: |\n| `Accordion`           | ✅     |\n| `AgentConnectButton`  | ✅     |\n| `Alert`               | ✅     |\n| `Badge`               | ✅     |\n| `Breadcrumb`          | ✅     |\n| `Button`              | ✅     |\n| `ButtonsGroup`        | ✅     |\n| `Callout`             | ✅     |\n| `Card`                | ✅     |\n| `Checkbox`            | ❌     |\n| `consentManagement`   | ❌     |\n| `Display`             | ✅     |\n| `Download`            | ❌     |\n| `Footer`              | ✅     |\n| `FranceConnectButton` | ✅     |\n| `Header`              | ✅     |\n| `Highlight`           | ❌     |\n| `Input`               | ❌     |\n| `MainNavigation`      | ❌     |\n| `Modal`               | ❌     |\n| `MonCompteProButton`  | ✅     |\n| `Notice`              | ✅     |\n| `Pagination`          | ❌     |\n| `PasswordInput`       | ❌     |\n| `Quote`               | ❌     |\n| `RadioButtons`        | ❌     |\n| `SearchBar`           | ❌     |\n| `Select`              | ❌     |\n| `SelectNext`          | ❌     |\n| `SlideMenu`           | ❌     |\n| `Stepper`             | ❌     |\n| `Table`               | ❌     |\n| `Tabs`                | ❌     |\n| `Tag`                 | ❌     |\n| `Tile`                | ❌     |\n| `ToggleSwitch`        | ❌     |\n| `ToggleSwitchGroup`   | ❌     |\n| `Upload`              | ❌     |\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Frescript-react-dsfr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodegouvfr%2Frescript-react-dsfr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodegouvfr%2Frescript-react-dsfr/lists"}