๐Ÿ”€Integration with routing libs

Like react-router or Next.js file system based route.

Depending on the framework or routing library you are using, links between pages are not handled the same way.

Usually, you'll have a <Link /> component provided by your routing library of choice. You need to let react-dsfr know about it so that whenever a link is needed in a DSFR component, you can provide the correct props for your <Link /> component.

When registering your Link component, its props type will propagate to the react-dsfr API.

This is how you are instructed to set it up by default (no change from the Initial setup guide)

app/StartDsfr.tsx
"use client";

import { startReactDsfr } from "@codegouvfr/react-dsfr/next-appdir";
import { defaultColorScheme } from "./defaultColorScheme";
import Link from "next/link";

declare module "@codegouvfr/react-dsfr/next-appdir" {
    interface RegisterLink { 
        Link: typeof Link;
    }
}

startReactDsfr({ 
	defaultColorScheme, 
	Link
});

export default function StartDsfr(){
        //Yes, leave null here.
	return null;
}

Examples

Client side routing

import { Card }ย from "@codegouvfr/react-dsfr/Card";

<Card
  linkProps={{
    to: "/my-page"
  }}
/>

The <Link /> component from react-router will be used.

External links:


linkProps={{
  href: "https://example.com"
  target="_blank"
}}

When react-dsfr detects that the href points to an external website it will use a regular <a/> instead of the <Link /> component.

Mailto links


linkProps={{
  href: "mailto:contact@code.gouv.fr"
}}

Same goes for the mailto links.

Converting a link to a button

linkProps={{  
  href: "#"
  onClick: ()=> { /* ... */ }
}}

React-dsfr will automatically convert the underlying HTML element into a <button /> that looks like a link for better Accessibility.

Last updated

Logo

2022-2023 Pรดle logiciel libre d'Etalab - MIT license