@xsolla/xui-image-thumbnail 0.95.0 → 0.97.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +40 -0
- package/package.json +3 -3
package/README.md
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# @xsolla/xui-image-thumbnail
|
|
2
|
+
|
|
3
|
+
Aspect-ratio-constrained image with overlay and four corner tag slots.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-image-thumbnail
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { ImageThumbnail } from '@xsolla/xui-image-thumbnail';
|
|
15
|
+
|
|
16
|
+
<ImageThumbnail
|
|
17
|
+
src="https://example.com/video-cover.jpg"
|
|
18
|
+
ratio="16:9"
|
|
19
|
+
overlay="fade"
|
|
20
|
+
centerContent={<PlayButton />}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
### ImageThumbnail
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `src` | `string` | — | Image source URL |
|
|
31
|
+
| `alt` | `string` | `""` | Alt text for the image |
|
|
32
|
+
| `ratio` | `"1:1" \| "16:9" \| "4:3" \| "3:2" \| "2:3" \| "9:16" \| "custom"` | `"16:9"` | Aspect ratio of the thumbnail |
|
|
33
|
+
| `customRatio` | `number` | — | Numeric ratio when `ratio` is `"custom"` |
|
|
34
|
+
| `width` | `number \| string` | `"100%"` | Width of the thumbnail |
|
|
35
|
+
| `overlay` | `"none" \| "fade" \| "dark"` | `"fade"` | Overlay style applied over the image |
|
|
36
|
+
| `centerContent` | `ReactNode` | — | Content displayed in the centre (e.g. play button) |
|
|
37
|
+
| `tagsTopLeft` | `ReactNode` | — | Content for top-left corner |
|
|
38
|
+
| `tagsTopRight` | `ReactNode` | — | Content for top-right corner |
|
|
39
|
+
| `tagsBottomLeft` | `ReactNode` | — | Content for bottom-left corner |
|
|
40
|
+
| `onPress` | `() => void` | — | Click handler |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-image-thumbnail",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"test:coverage": "vitest run --coverage"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
17
|
+
"@xsolla/xui-core": "0.97.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|