nes-react icon indicating copy to clipboard operation
nes-react copied to clipboard

Extend Button typing info to allow onClick prop to be passed from a TypeScript project

Open jonhermansen opened this issue 5 years ago • 2 comments

First of all, thank you for making NES.css much easier to use from React!

Today, when I was prototyping a new UI with TypeScript, I realized that I wasn't able to pass a onClick prop to the Button component without seeing an error:

C:\Users\jon\Desktop\my-app>yarn start
yarn run v1.13.0
$ react-scripts start
Starting the development server...
Failed to compile.

C:/Users/jon/Desktop/my-app/src/App.tsx
TypeScript error: Type '{ children: string; primary: true; onClick: (e: any) => void; }' is not assignable to type 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }'.
  Property 'onClick' does not exist on type 'IntrinsicAttributes & ButtonProps & { children?: ReactNode; }'.  TS2322

    31 |         return (
    32 |             <Container dark={this.state.dark} title="TESTING">
  > 33 |                 <Button primary onClick={this.handleClick}>Example</Button>
       |                  ^
    34 |             </Container>
    35 |         );
    36 |     }
Compiling...
Failed to compile.

I'm fairly new to TypeScript but the attached patch should fix the onClick issue, as well as the button disabled issue. Figured I'd fix them both in one go. I'm not sure if these types of issues exist on other components as well. For what it's worth, the onClick prop works totally fine when passed from JS, this is just an issue that users might see if they're using create-react-app + TypeScript.

jonhermansen avatar Mar 23 '19 23:03 jonhermansen

Derp. This should fix bug #8, not number 1.

jonhermansen avatar Mar 23 '19 23:03 jonhermansen

Derp. This should fix bug #8, not number 1.

I think this should fix #10 as well

niftyminer avatar Sep 24 '21 20:09 niftyminer