You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
The Tanstack Router documentation shows some examples of implementing a custom link with React Aria and other third party libraries. In this case, I am interested in the React Aria example as this is what I believe the NextUI Link is built on. https://tanstack.com/router/latest/docs/framework/react/guide/custom-link
The first issue is what they state in the docs, the onMouseEnter and onMouseLeave events not being supported by React Aria and most likely NextUI's Link as well. How would I go about implementing NextUI's Link when a lot of React Aria related hooks are needed to rectify the issue as shown in their solution.
The second issue is surrounding the onClick deprecation to onPress warning that appears when trying to integrate the two:
Here is the code I have so far, which is very similar to the third party examples on the same docs page:
import { Link, type LinkProps } from '@nextui-org/react';
import { type LinkComponent, createLink } from '@tanstack/react-router';
import { type PropsWithoutRef, forwardRef } from 'react';
type NextUILinkProps = Omit<PropsWithoutRef<LinkProps>, 'href'>;
const NextUILinkComponent = forwardRef<HTMLAnchorElement, NextUILinkProps>(
(props, ref) => {
return <Link ref={ref} {...props} />;
}
);
const RouterLinkComponent = createLink(NextUILinkComponent);
export const RouterLink: LinkComponent<typeof NextUILinkComponent> = (
props
) => {
return <RouterLinkComponent {...props} />;
};
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
The Tanstack Router documentation shows some examples of implementing a custom link with React Aria and other third party libraries. In this case, I am interested in the React Aria example as this is what I believe the NextUI Link is built on.
https://tanstack.com/router/latest/docs/framework/react/guide/custom-link
The first issue is what they state in the docs, the
onMouseEnter
andonMouseLeave
events not being supported by React Aria and most likely NextUI'sLink
as well. How would I go about implementing NextUI'sLink
when a lot of React Aria related hooks are needed to rectify the issue as shown in their solution.The second issue is surrounding the
onClick
deprecation toonPress
warning that appears when trying to integrate the two:Here is the code I have so far, which is very similar to the third party examples on the same docs page:
Anyone able to assist with these issues?
Beta Was this translation helpful? Give feedback.
All reactions