xoldyckk Posts - Answer Overflow

xoldyckk

Explore posts from servers

SSolidJS TTCTheo's Typesafe Cult DTDrizzle Team

•Created by xoldyckk on 8/15/2023 in #support

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>
  );
};

3 replies

SSolidJS

•Created by xoldyckk on 12/11/2022 in #support

Can we use solid's For and Index component for data that isn't stored as a signal?

Let's say we're using something like react-query or urql to fetch some data from the server and render it. We're not making a raw fetch request and storing the results in solid's signals. Instead the results are controlled by an external library. Would we get the benefits of solid's For and Index components with this approach?

4 replies

Gaming

Programming