# React 18 Wrappers

React 18 does not natively support web component events. Use these wrappers instead of bare web components.
Import components from `@politiet/sheriff-web-components/react-wrappers`.

React 19+ supports custom elements natively — may use web components directly without wrappers.

## Available Wrappers

```tsx
import {
	SDSAlertWrapper,
	SDSButtonWrapper,
	SDSCardWrapper,
	SDSCheckboxWrapper,
	SDSCheckboxGroupWrapper,
	SDSChipWrapper,
	SDSDetailsWrapper,
	SDSDialogWrapper,
	SDSHeadingWrapper,
	SDSIconWrapper,
	SDSLoaderWrapper,
	SDSNotificationWrapper,
	SDSRadioWrapper,
	SDSRadioGroupWrapper,
	SDSSelectWrapper,
	SDSStepperWrapper,
	SDSStepperStepWrapper,
	SDSSwitchWrapper,
	SDSTagWrapper,
	SDSTextWrapper,
	SDSTextAreaWrapper,
	SDSTextFieldWrapper,
} from '@politiet/sheriff-web-components/react-wrappers';
```

Internally, wrappers use `@lit/react` `createComponent()` to map native DOM events to React handlers.

## Usage Example

```tsx
import '@politiet/sheriff-css-framework';
import { SDSButtonWrapper, SDSTextFieldWrapper } from '@politiet/sheriff-web-components/react-wrappers';

function MyForm() {
	return (
		<form>
			<SDSTextFieldWrapper label="Name" name="name" placeholder="Enter your name" />
			<SDSButtonWrapper variant="primary" type="submit">
				Submit
			</SDSButtonWrapper>
		</form>
	);
}
```

## Event Mapping Examples

More React-y event handling in that names follow React naming/idioms:

-   `SDSButtonWrapper`: `onClick` → `click`, `onSubmit` → `submit`, `onReset` → `reset`
-   `SDSTextFieldWrapper`: `onInput` → `input`, `onSelect` → `select`, `onFocus` → `focus`, `onBlur` → `blur`, `onKeydown` → `keydown`
-   `SDSAlertWrapper`: `onSdsRemove` → `sds-remove`
-   `SDSDetailsWrapper`: `onSdsToggle` → `sds-toggle`
-   `SDSDialogWrapper`: `onSdsClose` → `sds-close`
-   `SDSCheckboxGroupWrapper` / `SDSRadioGroupWrapper`: `onSdsUpdate` → `sds-update`