Skip to content

feat(shopify-app-remix): allow overriding linkComponent on AppProvider#3215

Open
SinhSinhAn wants to merge 1 commit into
Shopify:mainfrom
SinhSinhAn:feat/app-provider-custom-link-component
Open

feat(shopify-app-remix): allow overriding linkComponent on AppProvider#3215
SinhSinhAn wants to merge 1 commit into
Shopify:mainfrom
SinhSinhAn:feat/app-provider-custom-link-component

Conversation

@SinhSinhAn
Copy link
Copy Markdown

What

Adds an optional linkComponent prop to <AppProvider> so apps can override the default RemixPolarisLink. When omitted, behaviour is identical to today (existing RemixPolarisLink is used), so this is a non-breaking minor.

import {NavLink} from '@remix-run/react';
import {AppProvider} from '@shopify/shopify-app-remix/react';

<AppProvider apiKey={apiKey} linkComponent={NavLink}>
  <Outlet />
</AppProvider>

Why

Closes Shopify/shopify-app-template-remix#486. The issue author (@blanklob) wants Polaris components that render links to use Remix's NavLink (or any custom wrapper) so they can pick up navigation state like isActive. Until now AppProvider Omit-stripped linkComponent from its public prop surface and hardcoded RemixPolarisLink, which left no escape hatch short of forking the provider.

This mirrors how i18n is already exposed: omit the Polaris prop, then re-declare a typed wrapper that defaults to the in-package value. The change is a single destructured default plus a new JSDoc-documented prop, so reviewers can audit it in one read.

What changed

File Change
packages/apps/shopify-app-remix/src/react/components/AppProvider/AppProvider.tsx Added linkComponent?: PolarisAppProviderProps['linkComponent'] to AppProviderProps with JSDoc. Destructured with RemixPolarisLink as the default. Forwarded to <PolarisAppProvider>.
packages/apps/shopify-app-remix/src/react/components/AppProvider/__tests__/AppProvider.test.tsx Added one test verifying a consumer-supplied link component is forwarded to the Polaris provider (the existing test confirms the default still resolves to RemixPolarisLink).
.changeset/app-provider-custom-link-component.md Minor changeset for @shopify/shopify-app-remix with a usage snippet.

Test plan

  • All 6 existing AppProvider tests still pass (npx jest --testPathPatterns AppProvider)
  • New regression test passes (custom linkComponent reaches <PolarisAppProvider>)
  • Default-omit behaviour preserved (linkComponent: RemixPolarisLink assertion in the existing i18n test continues to pass unchanged)
  • No type changes to the exported surface beyond adding an optional prop

Notes

  • The issue author originally floated the name customLink, but linkComponent matches the existing Polaris convention (and is the prop we forward to anyway), so I went with that to avoid two names for the same thing. Happy to rename if maintainers prefer.
  • The example uses Remix's NavLink, which is the headline use case from the issue's Loom.

`AppProvider` previously hardcoded `RemixPolarisLink` as the link
component passed to the underlying Polaris provider. Apps that wanted
to drive active-route styling with `NavLink`, or use any other custom
Remix link wrapper, had no way to do it without giving up the Shopify
AppProvider entirely.

Add an optional `linkComponent` prop that forwards through to Polaris,
keeping `RemixPolarisLink` as the default so the change is fully
backwards-compatible.

```tsx
import {NavLink} from '@remix-run/react';

<AppProvider apiKey={apiKey} linkComponent={NavLink}>
  <Outlet />
</AppProvider>
```

Closes Shopify/shopify-app-template-remix#486
@github-actions github-actions Bot added the devtools-gardener Post the issue or PR to Slack for the gardener label May 15, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

devtools-gardener Post the issue or PR to Slack for the gardener

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add customLink prop to the app provider to set custom Remix Link

1 participant