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

4 messages · Page 1 of 1 (latest)

hardy helm
# 
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.
```typescript
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>
  );
};```
lapis sundial
hardy helm
#

thanks i'll take a look

hardy helm
#

@lapis sundial

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.