# Using Green Core components with React

## React 19

React 19 has built-in support for web components, and Green Core automatically generates typed JSX wrappers for all components and icons. This means you can use the components directly in your JSX templates.

For example:

```ts

```

Then, in your JSX template:

```tsx
 console.log('Hello')}>
  Click me!

```

These imports are tree-shakable and the underlying web components will be defined automatically on first use.

Then, you can use the component in your JSX template as shown above.

### Events

All events in Green Core has a corresponding CamelCased version that you can use in React. For example, if you see an event called `gds-ui-state`, you can use `onGdsUiState` in react.

### Web component quirks with React

There are a few quirks to be aware of when using web components with React:
- **Event handling**: React does not apply some of its regular conventions to web components, for example, when you use `<input>` in React, it will automatically map the `input` event to the `onChange` callback.
- **State synchronization**: React does not automatically enforce state synchronisation on custom form controls.

Both of these issues are handled in the generated React wrappers for Green Core components. The wrappers add some middle-layer logic to replicate this idiomatic behavior, so they should behave as you expect normal form controls to behave, but it's good to be aware that it's not React doing this natively and there may be edge cases where it does not work as expected.

## Transitional styles

If you are using the 2016 design, you need to add transitional styles. You can import them like this and register separately:

```ts

ButtonStyles.register()
```

## React 18 and older

It is strongly recommended to upgrade to React 19 to use Green Core. However, if you need to use React 18 or older, you can still use Green Core components in your React application, but you need to provide your own wrapper for each component.

You can use the `createComponent` function from `@lit/react` to create these wrappers.

Here is an example:

```ts

ButtonStyles.register()

export const GdsButton = createComponent({
  tagName: getScopedTagName('gds-button'),
  elementClass: GdsButtonClass,
  react: React,
  events: { onClick: 'click' }, // Event callbacks need to be explicitly mapped to DOM events
})
```

Then you can just use `` like a regular React component.