diff --git a/README.md b/README.md
index 4b64ad9..1358919 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,7 @@ export default ImageEditor;
| `signer` | `Signer` | ❌ | Function to generate signed URLs for private images |
| `onAddImage` | `() => void` | ❌ | Callback function for adding new images |
| `exportOptions` | `ExportOptions` | ❌ | Configuration for export functionality |
+| `focusObjects` | `string[]` | ❌ | Custom list of selectable focus objects for object-based focus |
### ImageKitEditor Ref Methods
@@ -181,6 +182,19 @@ exportOptions={{
}}
```
+### Focus Objects
+
+You can override the list of selectable focus objects used when a transformation's focus is set to "Object" (e.g., Maintain Aspect Ratio, Forced Crop, Extract). If not provided, the editor defaults to ImageKit's supported objects (e.g., person, bicycle, car, dog, etc.).
+
+See the supported object list in the ImageKit docs: https://imagekit.io/docs/image-resize-and-crop#supported-object-list
+
+```tsx
+
+```
+
### File Element Interface
For advanced use cases with metadata and signed URLs:
diff --git a/examples/react-example/package.json b/examples/react-example/package.json
index 0587ae3..9acacc1 100644
--- a/examples/react-example/package.json
+++ b/examples/react-example/package.json
@@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
- "@imagekit/editor": "1.0.0",
+ "@imagekit/editor": "1.1.0",
"@types/node": "^20.11.24",
"@types/react": "^17.0.2",
"@types/react-dom": "^17.0.2",
diff --git a/examples/react-example/src/index.tsx b/examples/react-example/src/index.tsx
index c227ce9..2100c20 100644
--- a/examples/react-example/src/index.tsx
+++ b/examples/react-example/src/index.tsx
@@ -36,6 +36,12 @@ function App() {
requireSignedUrl: false,
},
},
+ {
+ url: "https://ik.imagekit.io/v3sxk1svj/brown%20bear%20plush%20toy%20on%20whi....jpg?updatedAt=1760432666859",
+ metadata: {
+ requireSignedUrl: false,
+ },
+ },
// ...Array.from({ length: 10000 }).map((_, i) => ({
// url: `https://ik.imagekit.io/v3sxk1svj/placeholder.jpg?updatedAt=${Date.now()}&v=${i}`,
// metadata: {
diff --git a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
index bd9f3db..87ad4d2 100644
--- a/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
+++ b/packages/imagekit-editor-dev/src/ImageKitEditor.tsx
@@ -4,8 +4,10 @@ import merge from "lodash/merge"
import React, { forwardRef, useImperativeHandle } from "react"
import { EditorLayout, EditorWrapper } from "./components/editor"
import type { HeaderProps } from "./components/header"
+import type { DEFAULT_FOCUS_OBJECTS } from "./schema"
import {
type FileElement,
+ type FocusObjects,
type RequiredMetadata,
type Signer,
useEditorStore,
@@ -24,7 +26,7 @@ interface EditorProps {
signer?: Signer
onAddImage?: () => void
exportOptions?: HeaderProps["exportOptions"]
-
+ focusObjects?: ReadonlyArray
onClose: (args: { dirty: boolean; destroy: () => void }) => void
}
@@ -32,7 +34,7 @@ function ImageKitEditorImpl(
props: EditorProps,
ref: React.Ref,
) {
- const { theme, initialImages, signer } = props
+ const { theme, initialImages, signer, focusObjects } = props
const {
addImage,
addImages,
@@ -62,8 +64,9 @@ function ImageKitEditorImpl(
initialize({
imageList: initialImages,
signer,
+ focusObjects,
})
- }, [initialImages, signer, initialize])
+ }, [initialImages, signer, focusObjects, initialize])
useImperativeHandle(
ref,
diff --git a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx b/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
index 294187d..24a8bb6 100644
--- a/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
+++ b/packages/imagekit-editor-dev/src/components/sidebar/transformation-config-sidebar.tsx
@@ -37,13 +37,14 @@ import { PiArrowLeft } from "@react-icons/all-files/pi/PiArrowLeft"
import { PiCaretDown } from "@react-icons/all-files/pi/PiCaretDown"
import { PiInfo } from "@react-icons/all-files/pi/PiInfo"
import { PiX } from "@react-icons/all-files/pi/PiX"
+import startCase from "lodash/startCase"
import { useEffect, useMemo } from "react"
import { Controller, type SubmitHandler, useForm } from "react-hook-form"
import Select from "react-select"
import CreateableSelect from "react-select/creatable"
import { z } from "zod/v3"
import type { TransformationField } from "../../schema"
-import { transformationSchema } from "../../schema"
+import { DEFAULT_FOCUS_OBJECTS, transformationSchema } from "../../schema"
import { useEditorStore } from "../../store"
import { isStepAligned } from "../../utils"
import AnchorField from "../common/AnchorField"
@@ -61,6 +62,7 @@ export const TransformationConfigSidebar: React.FC = () => {
addTransformation,
updateTransformation,
imageList,
+ focusObjects,
_setSidebarState,
_internalState,
_setTransformationToEdit,
@@ -296,40 +298,74 @@ export const TransformationConfigSidebar: React.FC = () => {
(
-