diff --git a/README.md b/README.md
index 273ae3d1..ab7a64fe 100644
--- a/README.md
+++ b/README.md
@@ -81,6 +81,13 @@ ReactDOM.render(
), document.getElementById('root'));
```
+### API
+
+| Name | Type | Default | Description |
+| --- | --- | --- | --- |
+| preview | boolean \| {visible: boolean,onVisibleChange:function(value, prevValue),getContainer: string \| HTMLElement \| (() => HTMLElement) \| false } | true | Whether to show preview |
+| current | number | 0 | If Preview the show img index |
+
## Example
http://localhost:8003/examples/
diff --git a/examples/controlledWithGroup.tsx b/examples/controlledWithGroup.tsx
new file mode 100644
index 00000000..b2e3b4a5
--- /dev/null
+++ b/examples/controlledWithGroup.tsx
@@ -0,0 +1,37 @@
+/* eslint-disable global-require */
+import * as React from 'react';
+import Image from '../src';
+import '../assets/index.less';
+
+export default function Base() {
+ const [visible, setVisible] = React.useState(false);
+ return (
+
+
+
+
+
{
+ setVisible(value);
+ },
+ current: 1,
+ }}
+ >
+
+
+
+
+ );
+}
diff --git a/src/PreviewGroup.tsx b/src/PreviewGroup.tsx
index 6da69b67..842c4531 100644
--- a/src/PreviewGroup.tsx
+++ b/src/PreviewGroup.tsx
@@ -1,10 +1,22 @@
import * as React from 'react';
import { useState } from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
+import { ImagePreviewType } from './Image';
import Preview, { PreviewProps } from './Preview';
+export interface PreviewGroupPreview
+ extends Pick {
+ /**
+ * If Preview the show img index
+ * @default 0
+ */
+ current?: number;
+}
+
export interface GroupConsumerProps {
previewPrefixCls?: string;
icons?: PreviewProps['icons'];
+ preview?: boolean | PreviewGroupPreview;
}
export interface GroupConsumerValue extends GroupConsumerProps {
@@ -35,11 +47,24 @@ const Group: React.FC = ({
previewPrefixCls = 'rc-image-preview',
children,
icons = {},
+ preview,
}) => {
+ const {
+ visible: previewVisible = undefined,
+ onVisibleChange: onPreviewVisibleChange = undefined,
+ getContainer = undefined,
+ current: currentIndex = 0,
+ } = typeof preview === 'object' ? preview : {};
const [previewUrls, setPreviewUrls] = useState