feat: enhance framework providers to accept custom Link/Image components (#2638)

* feat: enhance framework providers to accept custom Link components

* chore: add changeset

* chore: fix prettier

* fix: each framework props

* fix: nullable default value
This commit is contained in:
Sungyu Kang
2025-11-19 15:07:42 +08:00
committed by GitHub
parent fe380dad26
commit ade44d091b
9 changed files with 123 additions and 17 deletions
+6
View File
@@ -0,0 +1,6 @@
---
'fumadocs-core': patch
'fumadocs-ui': patch
---
feat: enhance framework providers to accept custom Link components
+11 -3
View File
@@ -5,14 +5,22 @@ import { useParams, usePathname, useRouter } from 'next/navigation';
import Link from 'next/link';
import Image from 'next/image';
export function NextProvider({ children }: { children: ReactNode }) {
export function NextProvider({
children,
Link: CustomLink,
Image: CustomImage,
}: {
children: ReactNode;
Link?: Framework['Link'];
Image?: Framework['Image'];
}) {
return (
<FrameworkProvider
usePathname={usePathname}
useRouter={useRouter}
useParams={useParams}
Link={Link as Framework['Link']}
Image={Image as Framework['Image']}
Link={CustomLink ?? (Link as Framework['Link'])}
Image={CustomImage ?? (Image as Framework['Image'])}
>
{children}
</FrameworkProvider>
+18 -2
View File
@@ -40,6 +40,22 @@ const framework: Framework = {
},
};
export function ReactRouterProvider({ children }: { children: ReactNode }) {
return <FrameworkProvider {...framework}>{children}</FrameworkProvider>;
export function ReactRouterProvider({
children,
Link: CustomLink,
Image: CustomImage,
}: {
children: ReactNode;
Link?: Framework['Link'];
Image?: Framework['Image'];
}) {
return (
<FrameworkProvider
{...framework}
Link={CustomLink ?? framework.Link}
Image={CustomImage ?? framework.Image}
>
{children}
</FrameworkProvider>
);
}
+18 -2
View File
@@ -58,6 +58,22 @@ const framework: Framework = {
/**
* Fumadocs adapter for Tanstack Router/Start
*/
export function TanstackProvider({ children }: { children: ReactNode }) {
return <FrameworkProvider {...framework}>{children}</FrameworkProvider>;
export function TanstackProvider({
children,
Link: CustomLink,
Image: CustomImage,
}: {
children: ReactNode;
Link?: Framework['Link'];
Image?: Framework['Image'];
}) {
return (
<FrameworkProvider
{...framework}
Link={CustomLink ?? framework.Link}
Image={CustomImage ?? framework.Image}
>
{children}
</FrameworkProvider>
);
}
+18 -2
View File
@@ -45,6 +45,22 @@ const framework: Framework = {
},
};
export function WakuProvider({ children }: { children: ReactNode }) {
return <FrameworkProvider {...framework}>{children}</FrameworkProvider>;
export function WakuProvider({
children,
Link: CustomLink,
Image: CustomImage,
}: {
children: ReactNode;
Link?: Framework['Link'];
Image?: Framework['Image'];
}) {
return (
<FrameworkProvider
{...framework}
Link={CustomLink ?? framework.Link}
Image={CustomImage ?? framework.Image}
>
{children}
</FrameworkProvider>
);
}
+13 -2
View File
@@ -2,10 +2,21 @@
import type { ComponentProps } from 'react';
import { RootProvider as BaseProvider } from '@/provider/base';
import { NextProvider } from 'fumadocs-core/framework/next';
import type { Framework } from 'fumadocs-core/framework';
export function RootProvider(props: ComponentProps<typeof BaseProvider>) {
export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
/**
* Custom framework components to override Next.js defaults
*/
components?: {
Link?: Framework['Link'];
Image?: Framework['Image'];
};
}
export function RootProvider({ components, ...props }: RootProviderProps) {
return (
<NextProvider>
<NextProvider Link={components?.Link} Image={components?.Image}>
<BaseProvider {...props}>{props.children}</BaseProvider>
</NextProvider>
);
+13 -2
View File
@@ -2,10 +2,21 @@
import type { ComponentProps } from 'react';
import { RootProvider as BaseProvider } from '@/provider/base';
import { ReactRouterProvider } from 'fumadocs-core/framework/react-router';
import type { Framework } from 'fumadocs-core/framework';
export function RootProvider(props: ComponentProps<typeof BaseProvider>) {
export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
/**
* Custom framework components to override React Router defaults
*/
components?: {
Link?: Framework['Link'];
Image?: Framework['Image'];
};
}
export function RootProvider({ components, ...props }: RootProviderProps) {
return (
<ReactRouterProvider>
<ReactRouterProvider Link={components?.Link} Image={components?.Image}>
<BaseProvider {...props}>{props.children}</BaseProvider>
</ReactRouterProvider>
);
+13 -2
View File
@@ -2,10 +2,21 @@
import type { ComponentProps } from 'react';
import { RootProvider as BaseProvider } from '@/provider/base';
import { TanstackProvider } from 'fumadocs-core/framework/tanstack';
import type { Framework } from 'fumadocs-core/framework';
export function RootProvider(props: ComponentProps<typeof BaseProvider>) {
export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
/**
* Custom framework components to override Tanstack Router defaults
*/
components?: {
Link?: Framework['Link'];
Image?: Framework['Image'];
};
}
export function RootProvider({ components, ...props }: RootProviderProps) {
return (
<TanstackProvider>
<TanstackProvider Link={components?.Link} Image={components?.Image}>
<BaseProvider {...props}>{props.children}</BaseProvider>
</TanstackProvider>
);
+13 -2
View File
@@ -2,10 +2,21 @@
import type { ComponentProps } from 'react';
import { RootProvider as BaseProvider } from '@/provider/base';
import { WakuProvider } from 'fumadocs-core/framework/waku';
import type { Framework } from 'fumadocs-core/framework';
export function RootProvider(props: ComponentProps<typeof BaseProvider>) {
export interface RootProviderProps extends ComponentProps<typeof BaseProvider> {
/**
* Custom framework components to override Waku defaults
*/
components?: {
Link?: Framework['Link'];
Image?: Framework['Image'];
};
}
export function RootProvider({ components, ...props }: RootProviderProps) {
return (
<WakuProvider>
<WakuProvider Link={components?.Link} Image={components?.Image}>
<BaseProvider {...props}>{props.children}</BaseProvider>
</WakuProvider>
);