Skip to content

Commit 0d5eb66

Browse files
fourcelsfourcels
committed
feat: add ImagePreview
1 parent c194c46 commit 0d5eb66

File tree

15 files changed

+613
-504
lines changed

15 files changed

+613
-504
lines changed

‎.changeset/config.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,5 +7,5 @@
77
"access": "public",
88
"baseBranch": "main",
99
"updateInternalDependencies": "patch",
10-
"ignore": ["docs", "shadcn"]
10+
"ignore": ["docs"]
1111
}

‎docs/docs/api.mdx‎

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,19 +3,18 @@ title: API
33
sidebar_position: 2
44
---
55

6-
## ImageUploadProps
6+
## ImageUpload
77

88
| Name | Description | Type | Default |
99
| ------------------ | --------------------------------------- | ------------------------------------------------------- | ---------------- |
1010
| children | custom upload zone | React.ReactNode | |
1111
| width | image width | `number` | 100 |
1212
| height | image height | `number` | `width` |
13-
| value | default images | `ValueType` | |
13+
| value | images | `ValueType` | |
1414
| onChange | callback for when the images changes | (value: `ValueType`) => void | |
1515
| transform | transform images to value | (images: `ImageItem[]`, max: number) => `ValueType` | defaultTransform |
1616
| onUpload | callback for when the drop event occurs | (file: `File`) => `string` \| `Promise<string>` | defaultUpload |
1717
| max | max image number | `number` | Infinity |
18-
| readonly | for preview | `boolean` | |
1918
| className | root className | `string` | |
2019
| itemClassName | image className | `string` | |
2120
| dropzoneClassName | dropzone className | `string` | |
@@ -53,3 +52,21 @@ const defaultTransform = (images: ImageItem[], max: number): ValueType => {
5352
return value;
5453
};
5554
```
55+
56+
## ImagePreview
57+
58+
| Name | Description | Type | Default |
59+
| ------------------ | ------------------ | ------------------------------------------------------- | ------- |
60+
| width | image width | `number` | 100 |
61+
| height | image height | `number` | `width` |
62+
| value | images | `ValueType` | |
63+
| placeholder | placeholder images | `ValueType` | |
64+
| className | root className | `string` | |
65+
| itemClassName | image className | `string` | |
66+
| photoProviderProps | | Omit\<[PhotoProviderProps][photoview-url], "children"\> | |
67+
68+
## ImageProvider
69+
70+
| Name | Description | Type | Default |
71+
| ----------- | ------------------ | ----------- | ------- |
72+
| placeholder | placeholder images | `ValueType` | |

‎docs/docs/getting-started.mdx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,15 +57,28 @@ function MyApp() {
5757
</ImageUpload>
5858
```
5959

60-
### Readonly
60+
### Preview
6161

6262
```jsx live
63-
<ImageUpload
63+
<ImagePreview
6464
value={[
6565
"/react-image-upload/img/undraw_docusaurus_mountain.svg",
6666
"/react-image-upload/img/undraw_docusaurus_react.svg",
6767
"/react-image-upload/img/undraw_docusaurus_tree.svg",
6868
]}
69-
readonly
7069
/>
7170
```
71+
72+
### Preview - Placeholder
73+
74+
```jsx live
75+
<ImagePreview placeholder="/react-image-upload/img/undraw_docusaurus_mountain.svg" />
76+
```
77+
78+
### Preview - Provider Placeholder
79+
80+
```jsx live
81+
<ImageProvider placeholder="/react-image-upload/img/undraw_docusaurus_mountain.svg">
82+
<ImagePreview />
83+
</ImageProvider>
84+
```

‎docs/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,15 @@
2323
"@mdx-js/react": "^3.1.0",
2424
"clsx": "^2.1.1",
2525
"prism-react-renderer": "^2.4.1",
26-
"react": "^18.3.1",
27-
"react-dom": "^18.3.1"
26+
"react": "^19.1.0",
27+
"react-dom": "^19.1.0"
2828
},
2929
"devDependencies": {
3030
"@docusaurus/module-type-aliases": "^3.7.0",
3131
"@docusaurus/tsconfig": "^3.7.0",
3232
"@docusaurus/types": "^3.7.0",
33-
"@types/react": "^18.3.21",
34-
"@types/react-dom": "^18.3.7",
33+
"@types/react": "^19.1.3",
34+
"@types/react-dom": "^19.1.3",
3535
"typescript": "^5.8.3"
3636
},
3737
"browserslist": {

‎docs/src/pages/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ function HomepageHeader() {
3636
);
3737
}
3838

39-
export default function Home(): JSX.Element {
39+
export default function Home() {
4040
const { siteConfig } = useDocusaurusContext();
4141
return (
4242
<Layout title={siteConfig.title}>

‎docs/src/theme/ReactLiveScope/index.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
11
import React from "react";
2-
import { ImageUpload } from "@fourcels/react-image-upload";
2+
import {
3+
ImagePreview,
4+
ImageProvider,
5+
ImageUpload,
6+
} from "@fourcels/react-image-upload";
37

48
// Add react-live imports you need here
59
const ReactLiveScope: unknown = {
610
React,
711
...React,
812
ImageUpload,
13+
ImagePreview,
14+
ImageProvider,
915
};
1016

1117
export default ReactLiveScope;

‎packages/react-image-upload/CHANGELOG.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# @fourcels/react-image-upload
22

3+
## 0.7.0
4+
5+
### Minor Changes
6+
7+
- feat: add ImagePreview
8+
39
## 0.6.3
410

511
### Patch Changes

packages/react-image-upload/globle.d.ts renamed to packages/react-image-upload/global.d.ts

File renamed without changes.

‎packages/react-image-upload/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@fourcels/react-image-upload",
3-
"version": "0.6.3",
3+
"version": "0.7.0",
44
"type": "module",
55
"description": "A image upload component for React",
66
"main": "./dist/index.js",
@@ -32,24 +32,24 @@
3232
"license": "MIT",
3333
"dependencies": {
3434
"clsx": "^2.1.1",
35-
"motion": "^11.18.2",
35+
"motion": "^12.9.7",
3636
"react-dropzone": "^14.3.8",
3737
"react-photo-view": "^1.2.7",
3838
"uuid": "^11.1.0"
3939
},
4040
"devDependencies": {
41-
"@types/react": "^18.3.21",
41+
"@types/react": "^19.1.3",
4242
"autoprefixer": "^10.4.21",
4343
"postcss": "^8.5.3",
4444
"postcss-nested": "^7.0.2",
45-
"react": "^18.3.1",
46-
"react-dom": "^18.3.1",
45+
"react": "^19.1.0",
46+
"react-dom": "^19.1.0",
4747
"tsup": "^8.4.0",
4848
"typescript": "^5.8.3"
4949
},
5050
"peerDependencies": {
51-
"react": "^18 || ^19",
52-
"react-dom": "^18 || ^19"
51+
"react": "^19",
52+
"react-dom": "^19"
5353
},
5454
"files": [
5555
"dist"

‎packages/react-image-upload/src/Dropzone.tsx‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import { DropzoneOptions, useDropzone } from "react-dropzone";
22
import clsx from "clsx";
3-
import { forwardRef, useImperativeHandle } from "react";
43

54
const PlusIcon = () => (
65
<svg
@@ -27,19 +26,16 @@ export type DropzoneProps = {
2726
children?: React.ReactNode;
2827
};
2928

30-
export const Dropzone = forwardRef<HTMLElement, DropzoneProps>((props, ref) => {
29+
export const Dropzone = (props: DropzoneProps) => {
3130
const { className, options, children, width, height } = props;
3231
const {
33-
rootRef,
3432
getRootProps,
3533
getInputProps,
3634
isDragActive,
3735
isDragAccept,
3836
isDragReject,
3937
} = useDropzone(options);
4038

41-
useImperativeHandle(ref, () => rootRef.current);
42-
4339
return (
4440
<div
4541
{...getRootProps({
@@ -63,6 +59,4 @@ export const Dropzone = forwardRef<HTMLElement, DropzoneProps>((props, ref) => {
6359
)}
6460
</div>
6561
);
66-
});
67-
68-
Dropzone.displayName = "Dropzone";
62+
};

0 commit comments

Comments
 (0)