Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Question

Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Is there a way to enhance the props of an existing JSX element in SolidJS and craft a custom interface similar to the ButtonProps interface shown in this React example below?

import Solid from 'solid-js';

interface ButtonProps extends Solid.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon: boolean;
}

const Button: Solid.FC<ButtonProps> = ({ title, showIcon, ...props }) => {
  return (
    <button {...props}>
      {title}
      {showIcon && <Icon/>}
    </button>
  );
};

typescript solid-js

Answer 1

Answer №1

This has been my go-to approach:

import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

const Button: Component<ButtonProps> = (props) => {
  const [, rest] = splitProps(props, ["title", "showIcon"]);
  return (
    <button {...rest}>
      {props.title}
      {props.showIcon && <Icon/>}
    </button>
  );
}

In the example above, I utilized a type intersection, but an alternative method could involve extending the interface.

Within this code snippet, I've made use of the Component type, which currently includes an optional children prop in the props. However, this is slated to change with the upcoming 1.4 release.

Furthermore, I've incorporated the splitProps function to prevent destructuring and maintain reactive updates to the prop values.

Answer 2

This has been my go-to approach:

import type { Component, JSX } from "solid-js";
import { splitProps } from "solid-js";

export type ButtonProps = {
  title: string;
  showIcon: boolean;
} & JSX.HTMLAttributes<HTMLButtonElement>;

const Button: Component<ButtonProps> = (props) => {
  const [, rest] = splitProps(props, ["title", "showIcon"]);
  return (
    <button {...rest}>
      {props.title}
      {props.showIcon && <Icon/>}
    </button>
  );
}

In the example above, I utilized a type intersection, but an alternative method could involve extending the interface.

Within this code snippet, I've made use of the Component type, which currently includes an optional children prop in the props. However, this is slated to change with the upcoming 1.4 release.

Furthermore, I've incorporated the splitProps function to prevent destructuring and maintain reactive updates to the prop values.

Answer 3

Answer №2

Similarly, the method to achieve this is quite comparable, with the exception of refraining from destructuring for reactive properties and using splitProps instead. For instance, your code snippet would now look like:

import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon?: boolean; 
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

It's worth noting that the attributes' types for intrinsic elements are within the realm of JSX in solid, courtesy of jsx-dom-expressions responsible for converting JSX into reactive expressions.

Answer 4

Similarly, the method to achieve this is quite comparable, with the exception of refraining from destructuring for reactive properties and using splitProps instead. For instance, your code snippet would now look like:

import { splitProps, JSX } from 'solid-js';

interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon?: boolean; 
}

const Button = (props: ButtonProps) => {
  const [local, buttonProps] = splitProps(props, ['title', 'showIcon']);
  return (
    <button {...buttonProps}>
      {local.title}
      {local.showIcon && <Icon/>}
    </button>
  );
};

It's worth noting that the attributes' types for intrinsic elements are within the realm of JSX in solid, courtesy of jsx-dom-expressions responsible for converting JSX into reactive expressions.

Unleashing the Power of Typescript and SolidJS: Expanding the Properties of JSX Elements

Answer №1

Answer №2

Similar questions

Is it possible to utilize pinia getter as the initial parameter in Vue3's watch function?

Utilize Angular to initiate the transmission of attribute values upon a click event

Introducing the concept of type-specific name inclusion

Using class-validator in Node.js to validate arrays of objects

An issue has occurred while utilizing Angular

How can the file system module (fs) be utilized in Angular 7?

Enumerate the names of the private properties within the class

Issue: Unable to load the file named 'script.ts' while employing chrome.scripting.executeScript

Restrictive discriminated union via function argument

Improved ergonomics for enhancing TypeScript union-narrowing typeguard function

I am facing a problem with the code for my React login page and router

Oops! The last loader did not provide a Buffer or String as expected

Error: Class cannot be loaded by React Webpack loader

Angular 5 Directive for Structuring Content

Simple and quickest method for incorporating jQuery into Angular 2/4

How can nested json be sorted effectively based on two specific fields?

Issue: The last loader (./node_modules/awesome-typescript-loader/dist/entry.js) failed to provide a Buffer or String

The pipe property cannot be accessed for the specified type "OperatorFunction<unknown, [unknown, boolean, any]>"

What is causing this issue in TypeScript version 4.8?

Angular integration problem with aws-amplify when signing up with Google account