Link
Link is used to provide a way to navigate to different pages or sections of the same page.
Link
- The Link component.
import { Link } from "@dreamy-ui/react/rsc";
<Link href="/">Home</Link>
You can use the isExternal
prop to open the link in a new tab.
<Link href="https://www.google.com" isExternal>
Google
</Link>
In this example we'll combine Remix (react-router
) Link component with Dream Link component.
import { Link as DreamLink, type LinkProps as DreamLinkProps } from "@dreamy-ui/react";
import { Link as RemixLink, type LinkProps as RemixLinkProps } from "@remix-run/react";
import { forwardRef } from "react";
export interface LinkProps extends DreamLinkProps, Omit<RemixLinkProps, keyof DreamLinkProps> {}
export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
return <DreamLink ref={ref} as={RemixLink} {...props} />;
});
Link.displayName = "Link";