SolidJS•10mo ago

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

xoldyckk•10mo ago

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.

Gaming

Programming

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