Help me build a custom link component which adheres to solid's principles

import { ParentComponent } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
class: string | undefined;
href: string;
sameSite: boolean;
} & AnchorProps
> = (props) => {
return (
<A
class={props.class}
href={props.href}
target={props.sameSite ? "_self" : "_blank"}
>
{props.children}
</A>
);
};
import { ParentComponent } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
class: string | undefined;
href: string;
sameSite: boolean;
} & AnchorProps
> = (props) => {
return (
<A
class={props.class}
href={props.href}
target={props.sameSite ? "_self" : "_blank"}
>
{props.children}
</A>
);
};
I wanted to ask how do I apply the rest of properties present on the props object on <A> tag? Since in solid destructuring would make the signals not work later on down the line, if I were to pass them in through props. I was thinking of doing this but this seems error prone. Basically I wanted to know of a clean way to achieve a similar thing without breaking solid's reactivity.
import { ParentComponent } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
class: string | undefined;
href: string;
sameSite: boolean;
} & AnchorProps
> = ({children, class, href, sameSite, ...props}) => {
return (
<A
class={class}
href={href}
target={sameSite ? "_self" : "_blank"}
...props
>
{children}
</A>
);
};
import { ParentComponent } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
class: string | undefined;
href: string;
sameSite: boolean;
} & AnchorProps
> = ({children, class, href, sameSite, ...props}) => {
return (
<A
class={class}
href={href}
target={sameSite ? "_self" : "_blank"}
...props
>
{children}
</A>
);
};
1 Reply
╾━╤デ╦︻(▀̿Ĺ̯▀̿ ̿)
thanks i'll take a look @draw.uy
import { ParentComponent, splitProps } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
sameSite: boolean;
} & AnchorProps
> = (props) => {
const [local, remainingProps] = splitProps(props, ["children", "sameSite"]);

return (
<A
target={local.sameSite ? "_self" : "_blank"}
{...remainingProps}
>
{local.children}
</A>
);
};
import { ParentComponent, splitProps } from "solid-js";
import { A } from "solid-start";
import { type AnchorProps } from "@solidjs/router";

export const CustomLink: ParentComponent<
{
sameSite: boolean;
} & AnchorProps
> = (props) => {
const [local, remainingProps] = splitProps(props, ["children", "sameSite"]);

return (
<A
target={local.sameSite ? "_self" : "_blank"}
{...remainingProps}
>
{local.children}
</A>
);
};
So, if I'm understanding this correctly I should extract out the the reactive values I pass down from the parent component in the object local and spread out the remainingProps into the <A> tag? At least for this piece of code.
Want results from more Discord servers?
Add your server