mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-12 04:09:12 +00:00
Add event types to react wrapper components (#1419)
* Rename SlSlideChange for consistency with other events * Setup React event types for events used by Shoelace components Means that consumers of Shoelace via the React wrapper will be able to use callback methods with the correct event type, instead of having to rely on casting and friends when using Typescript. * Add docs demonstrating importing event types for React callbacks
This commit is contained in:
@@ -83,6 +83,25 @@ function MyComponent() {
|
||||
export default MyComponent;
|
||||
```
|
||||
|
||||
You can also import the event type for use in your callbacks, shown below.
|
||||
|
||||
```tsx
|
||||
import { useCallback, useState } from 'react';
|
||||
import { SlInput, SlInputEvent } from '@shoelace-style/shoelace/%NPMDIR%/react';
|
||||
import type SlInputElement from '@shoelace-style/shoelace/%NPMDIR%/components/input/input';
|
||||
|
||||
function MyComponent() {
|
||||
const [value, setValue] = useState('');
|
||||
const onInput = useCallback((event: SlInputEvent) => {
|
||||
setValue(event.detail);
|
||||
}, []);
|
||||
|
||||
return <SlInput value={value} onSlInput={event => setValue((event.target as SlInputElement).value)} />;
|
||||
}
|
||||
|
||||
export default MyComponent;
|
||||
```
|
||||
|
||||
## Testing with Jest
|
||||
|
||||
Testing with web components can be challenging if your test environment runs in a Node environment (i.e. it doesn't run in a real browser). Fortunately, [Jest](https://jestjs.io/) has made a number of strides to support web components and provide additional browser APIs. However, it's still not a complete replication of a browser environment.
|
||||
|
||||
Reference in New Issue
Block a user