Support Typescript + React

This doesn’t appear to work in a Typescript project using React. If I use the lower case <wired-button>, Typescript gives the error, Property 'wired-button' does not exist on type 'JSX.IntrinsicElements'. If I use <WiredButton> as if it were a React component, I get a runtime error, TypeError: Class constructor WiredButton cannot be invoked without 'new'. Is there any way to fix one/both of these errors, or modify the library so it can be used in Typescript + React projects?

[b7s9]

I’m getting this same error in 2021. Next.js + Typescript environment

[alexandrtovmach]

Have successful setup of wired elements in react + ts project. What I did:

1. Install elements from npm (+ roughjs package #179 ):

   npm i wired-elements roughjs@4.4
   

2. Create src/wired.d.ts to have proper typings:

   type Wired2React<T> = Partial<T> & React.RefAttributes<T> | React.HTMLAttributes<T>;
   declare namespace JSX {
     interface IntrinsicElements {
       "wired-button": Wired2React<import("wired-elements").WiredButton>;
       "wired-calendar": Wired2React<import("wired-elements").WiredCalendar>;
       "wired-card": Wired2React<import("wired-elements").WiredCard>;
       "wired-checkbox": Wired2React<import("wired-elements").WiredCheckbox>;
       "wired-combo": Wired2React<import("wired-elements").WiredCombo>;
       "wired-dialog": Wired2React<import("wired-elements").WiredDialog>;
       "wired-divider": Wired2React<import("wired-elements").WiredDivider>;
       "wired-fab": Wired2React<import("wired-elements").WiredFab>;
       "wired-icon-button": Wired2React<import("wired-elements").WiredIconButton>;
       "wired-image": Wired2React<import("wired-elements").WiredImage>;
       "wired-input": Wired2React<import("wired-elements").WiredInput>;
       "wired-item": Wired2React<import("wired-elements").WiredItem>;
       "wired-link": Wired2React<import("wired-elements").WiredLink>;
       "wired-listbox": Wired2React<import("wired-elements").WiredListbox>;
       "wired-progress": Wired2React<import("wired-elements").WiredProgress>;
       "wired-radio": Wired2React<import("wired-elements").WiredRadio>;
       "wired-search-input": Wired2React<import("wired-elements").WiredSearchInput>;
       "wired-slider": Wired2React<import("wired-elements").WiredSlider>
       "wired-spinner": Wired2React<import("wired-elements").WiredSpinner>;
       "wired-tabs": Wired2React<import("wired-elements").WiredTabs>;
       "wired-textarea": Wired2React<import("wired-elements").WiredTextarea>;
       "wired-toggle": Wired2React<import("wired-elements").WiredToggle>;
       "wired-video": Wired2React<import("wired-elements").WiredVideo>;
     }
   }