Skip to content

Allow users to configure custom link component#563

Open
virginiacc wants to merge 6 commits intomainfrom
vcc-link-context
Open

Allow users to configure custom link component#563
virginiacc wants to merge 6 commits intomainfrom
vcc-link-context

Conversation

@virginiacc
Copy link
Copy Markdown
Contributor

@virginiacc virginiacc commented May 4, 2026

This PR adds the ability for users to globally configure the DSR to use their router's link component.

Changes

  • Adds DSR Context that accepts a LinkComponent value. Defaults to a BaseLink component that outputs an anchor element.
  • Updates Link component to output the LinkComponent value from the DSR context
  • Updates Breadcrumbs component to use Link instead of anchor element
  • Removes react-router dependency

Breaking changes

  • Updates Link, Header, SecondaryNav, and Breadcrumb components to use to prop instead of href for compatibility with external link components

How to test this PR

  1. Wrap app in DSR context provider and pass it a custom link component:
<YourRouterProvider>
  <DSRContext value={{LinkComponent: YourLinkComponent}} >
    // App code
  </DSRContext>
  1. Update instances of Link, Breadcrumbs, SecondaryNav, and Header to use to instead of href
  2. Check that the component passed in the context is output anywhere the Link component is used

To do

  • Add documentation

@github-actions
Copy link
Copy Markdown

github-actions Bot commented May 4, 2026

PR Preview Action v1.8.1

QR code for preview link

🚀 View preview at
https://cfpb.github.io/design-system-react/pr-previews/pr-563/

Built to branch gh-pages at 2026-05-06 16:58 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

Comment thread src/components/Link/link.test.tsx Outdated
to,
children,
...others
}: CustomLinkProperties): JSXElement | null => {
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The null is unnecessary here since the custom type returns that.

Suggested change
}: CustomLinkProperties): JSXElement | null => {
}: CustomLinkProperties): JSXElement => {

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in bbf6a8c

Comment thread src/context/dsr-context.tsx Outdated
export const useDSRContext = () => use(DSRContext);

export interface DSRProviderProperties {
LinkComponent: React.ComponentType<BaseLinkProperties> | null;
Copy link
Copy Markdown
Collaborator

@flacoman91 flacoman91 May 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should probably remove the null from the public type OR fallback to BaseLink

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed in bbf6a8c

Comment thread src/context/dsr-context.tsx
Comment thread src/components/Breadcrumb/breadcrumb.tsx Outdated
Comment thread src/components/Link/base-link.tsx Outdated
Comment thread src/components/Link/link.test.tsx Outdated
Comment thread src/components/Link/link.test.tsx Outdated
Comment thread src/components/Link/link.tsx Outdated
@@ -0,0 +1,31 @@
import { createContext, use } from 'react'
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
import { createContext, use } from 'react'
import { ComponentType, createContext, use } from 'react';

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in bbf6a8c

Comment thread src/context/dsr-context.tsx Outdated
Comment thread src/context/dsr-context.tsx Outdated
Comment thread src/context/dsr-context.tsx Outdated
export const useDSRContext = () => use(DSRContext);

export interface DSRProviderProperties {
LinkComponent: React.ComponentType<BaseLinkProperties> | null;
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
LinkComponent: React.ComponentType<BaseLinkProperties> | null;
LinkComponent: ComponentType<BaseLinkProperties> | null;

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated in bbf6a8c

virginiacc and others added 2 commits May 6, 2026 08:43
Co-authored-by: Richard Dinh <1038306+flacoman91@users.noreply.github.com>
@virginiacc virginiacc marked this pull request as ready for review May 6, 2026 17:03
@virginiacc virginiacc requested a review from flacoman91 May 6, 2026 17:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants