Specify specific props and accept general HTML props in Typescript React App

Question

I have a React Wrapper Component, that accepts some props, but forwards all others to the child component (especially relevent for native props like className, id, etc.).

Typescript complains, however, when I pass native props. See error message:

TS2339: Property 'className' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes< Wrapper > & Readonly< { children?: ReactNode; }> & Readonly< WrapperProps>'.

How can I get a component with specific props that also accepts native props (without accepting any props and giving up on type checking)?

My code looks like this:

interface WrapperProps extends JSX.IntrinsicAttributes {
  callback?: Function
}

export class Wrapper extends React.Component<WrapperProps>{
  render() {
    const { callback, children, ...rest } = this.props;
    return <div {...rest}>
      {children}
    </div>;
  }
}

export const Test = () => {
  return <Wrapper className="test">Hi there</Wrapper>
}

FYI: I found a similar question here, but the answer basically gives up type checking, which I want to avoid: Link to SO-Question

Titian Cernicova-Dragomir · Accepted Answer · 2018-08-14 07:40:54Z

103

We can have a look at how div props are defined:

interface IntrinsicElements {
    div: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
}

If we use React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> as the base type we will have all properties of div. Since DetailedHTMLProps just adds ref to React.HTMLAttributes<HTMLDivElement> we can use just this as the base interface to get all div properties:

interface WrapperProps extends React.HTMLAttributes<HTMLDivElement> {
  callback?: Function
}

export class Wrapper extends React.Component<WrapperProps>{
  render() {
    const { callback, children, ...rest } = this.props;
    return <div {...rest}>
      {children}
    </div>;
  }
}

export const Test = () => {
  return <Wrapper className="test">Hi there</Wrapper> // works now
}

edited Aug 14, 2018 at 7:40

answered Aug 14, 2018 at 7:19

Titian Cernicova-Dragomir

253k37 gold badges465 silver badges395 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sergej Herbert Over a year ago

Thank you very much! This seems a bit verbose. Is there no other "more react" or "more typescript" way to do that? It seems like a pretty usual use-case and extending the HTMLBaseAttributes seems a bit overkill. But the answer solves the question, so thanks!

Titian Cernicova-Dragomir Over a year ago

@SergejHerbert I meant to remove the DetailedHTMLProps part, removed it now. This is the shortest most typescript way to do it as far as I know :)

Titian Cernicova-Dragomir Over a year ago

@SergejHerbert An alternative would be to use an intersection type for the props : class Wrapper extends React.Component<WrapperProps & React.HTMLAttributes<HTMLDivElement>>

webbower Over a year ago

How would you do accomplish this if the native element rendered by your component is determined via a prop:

function MyComponent({ elementName: Component, children, ...props }) { return (<Component {...props}>{children}</Component>); }

since a type param is required?

Brunno Vodola Martins Over a year ago

@webbower I've had a similar issue and for a generic HTML element, I've used: interface WrapperProps extends React.HTMLAttributes<HTMLElement>

Adam Cooper · Accepted Answer · 2020-10-28 11:23:08Z

13

Have a look at ComponentProps, ComponentPropsWithRef, and ComponentPropsWithoutRef - this will accept a generic input that can be "div", "button", or any other component. It will include react specific props such as className as well:

import React, {
  forwardRef,
  ComponentPropsWithoutRef,
  ComponentProps,
  ComponentPropsWithRef
} from "react";

const ExampleDivComponent = forwardRef<
  HTMLDivElement,
  ComponentPropsWithoutRef<"div">
>(({ children, ...props }, ref) => {
  return (
    <div {...props} ref={ref}>
      {children}
    </div>
  );
});

<ExampleDivComponent
  className=""
  style={{ background: "green" }}
  tabIndex={0}
  onTouchStart={() => alert("touched")}
/>;

const ExampleButtonComponent: React.FC<ComponentProps<"button">> = ({
  children,
  ...props
}) => {
  return <button {...props}>{children}</button>;
};

<ExampleButtonComponent onClick={() => alert("clicked")} />;

answered Oct 28, 2020 at 11:23

Adam Cooper

1,03612 silver badges18 bronze badges

2 Comments

Vladimir Tolstikov Over a year ago

Yes, looks as ComponentProps is the proper way to go there. interface Props extends ComponentProps<'div'> {...

Bowber Over a year ago

This approach will have a "key" in the props, which the accepted answer doesn't have. Don't know why ¯_(ツ)_/¯.

schpet · Accepted Answer · 2020-05-04 18:59:41Z

8

JSX.IntrinsicElements has this info, e.g.

const FooButton: React.FC<JSX.IntrinsicElements['button']> = props => (
  <button {...props} className={`foo ${props.className}`} />
)

// alternative...
const FooButton: React.FC<React.PropsWithoutRef<
  JSX.IntrinsicElements['button']
>> = props => <button {...props} className={`foo ${props.className}`} />

discovered this in the react-typescript-cheatsheet project.

answered May 4, 2020 at 18:59

schpet

10.7k6 gold badges36 silver badges36 bronze badges

Comments

webbower · Accepted Answer · 2020-02-13 22:23:30Z

A co-worker of mine figured it out. Sharing here for broader visibility:

interface ComponentPropTypes = {
  elementName?: keyof JSX.IntrinsicElements; // list of all native DOM components
  ...
}


// Function component
function Component({
  elementName: Component = 'div',
  ...rest,
  // React.HTMLAttributes<HTMLOrSVGElement>) provides all possible native DOM attributes
}: ComponentPropTypes & React.HTMLAttributes<HTMLOrSVGElement>)): JSX.Element {
  return <Component {...rest} />;
}

// Class component
class Component extends React.Component<ComponentPropTypes & React.HTMLAttributes<HTMLOrSVGElement>> {
  render() {
    const {
      elementName: Component,
      ...rest,
    } = this.props;
    return <Component {...rest} />
  }
}

Collectives™ on Stack Overflow

Specify specific props and accept general HTML props in Typescript React App

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related