CODEWITHSUNDEEP
reactjstypescriptcustom-attributes
Yaniv Peretz
Yaniv Peretz

Reputation: 1168

React Typescript - Adding custom attribute

React Typescript allow to add custom data-* attributes. But is it possible to add custom attributes like 'name' || 'test' act. ?

<span name="I'm causing a type error" data-test="I'm Working"/>

Bold added by me.

type error: Type '{ children: Element; name: string; data-test: string; }' is not assignable to type 'DetailedHTMLProps, HTMLSpanElement>'. Property 'name' does not exist on type 'DetailedHTMLProps, HTMLSpanElement>'. TS232

"react": "^16.7.0",
"typescript": "^3.2.4",

Upvotes: 30

Views: 23907

Answers (4)

lastStranger
lastStranger

Reputation: 205

simple add custom attribute start with data-, in some case you may start with aria-

<div data-attr={3} data-nothing="super">hover</div>

it seems typescript knows custom attribute with those prefix, check this link

Upvotes: 5

svrakata
svrakata

Reputation: 21

Create any file with extension .d.ts in your project and just extend the button interface in the JSX namespace. I'm using this for creating amp pages with React.

declare namespace JSX {
    interface ExtendedButton
        extends React.DetailedHTMLProps<
            React.ButtonHTMLAttributes<HTMLButtonElement>,
            HTMLButtonElement
        > {
        customAttribute?: string;
    }

    interface IntrinsicElements {
        button: ExtendedButton;
    }
}

Upvotes: 2

Yaniv Peretz
Yaniv Peretz

Reputation: 1168

there is another way... skipping the static check (typescript don't do dynamic)

{ 
  const allowedProps = {test: "not-data-attribute"}
  <span {...allowedProps}/>
}

Upvotes: 38

Juraj Kocan
Juraj Kocan

Reputation: 2868

in react 16+ it is possible, see

probem is that typescript didnt know about it(yet)

but you can still add @ts ignore for typechecking

{ //@ts-ignore
  <span name="I'm causing a type error" data-test="I'm Working"/>
}

Upvotes: 27

Related Questions