Import & Use RuxButton

[Oceanestars]

Hi!
I'm trying to follow the docs for the button component.

In react, I'm trying to import the button rux-button. And I get "Property 'rux-button' does not exist on type 'JSX.IntrinsicElements'." and it won't load the page/crash the page

import { RuxButton } from '@astrouxds/astro-web-components/dist/components/rux-button'
customElements.define('rux-button', RuxButton)

const container = () => {

return (
<div style="padding: 10%; display: flex; justify-content: center;">
    <rux-button>
        Button
    </rux-button>
</div>
)

Here is a sandbox for easy reproduction.

If this is an issue I can convert this to an issue but I think it's more me missing something :)

Thanks for any help!

[micahjones13]

Hey @Oceanestars, is there any specific reason that you're importing the rux-button from the @astrouxds/astro-web-components package instead of the RuxButton from the @astrouxds/react package? Doing the latter will solve your issue, as that imports the button component that's wrapped for React.
Here's an updated sandbox for reference, but please let me know if I'm missing anything!

[Oceanestars]

Hey,
No,I copied and pasted the code from here https://astro-components.netlify.app/?path=/docs/components-button--default-story#cherry-picking

Will try that different import!

[micahjones13]

There are a few different packages available depending on what framework you're using, which can get confusing - and our docs don't do an amazing job at pointing that out on first glance, so I apologize. For future reference, @astrouxds/react is our component library wrapped for React, @astrouxds/angular is (you guessed it!) for Angular, and the @astrouxds/astro-web-components is the vanilla web components library which can be used with vanilla HTML/JS or Vue.

[Oceanestars]

That makes sense. Thanks!
Also that fixed my issue. Wondering why adding onRuxChange on the RuxButton would give this warning(I believe I read somewhere OnRuxChange and onChange are interchangeable or is that incorrect?)

Type '{ children: string; onRuxChange: void; }' is not assignable to type 'IntrinsicAttributes & RuxButton & Omit<HTMLAttributes, "style"> & StyleReactProps & RefAttributes<...>'.
Property 'onRuxChange' does not exist on type 'IntrinsicAttributes & RuxButton & Omit<HTMLAttributes, "style"> & StyleReactProps & RefAttributes<...>'. Did you mean 'onChange'?

[micahjones13]

The change events are a bit tricky because the vanilla on change and React's onChange fire at different times. The existing browser behavior fires the on change event when a user commits a change to an element, through something like a blur event. React on the other hand fires it's onChange event whenever a change is made to the element, like typing a new character into an input field.
Because our components are web components, they follow the existing browser definition for the on change event. This means that the onRuxchange event is the browsers version of on change. The regular React onChange should work for most cases, but if you're running into issues with it I'd recommend trying onRuxinput to see if that solves any issues.

Additionally, your problem may come from trying to add an onChange event to a button, which doesn't have that type of event. You may be looking for onClick in this case.