Skip to main content

PerspectiveTransformProps

react-perspective-transform


react-perspective-transform / PerspectiveTransformProps

Interface: PerspectiveTransformProps

Defined in: src/PerspectiveTransform.tsx:41

Props for the PerspectiveTransform component.

Properties

children

children: ReactNode

Defined in: src/PerspectiveTransform.tsx:46

The child node(s) to which we apply the perspective transform. Usually an image, video, or other content.


editable?

optional editable: boolean

Defined in: src/PerspectiveTransform.tsx:70

Whether the component is currently in edit mode. If provided, this prop controls edit mode externally. If omitted, SHIFT+[toggleKeys] toggles a local edit mode.


onEditableChange()?

optional onEditableChange: (nextEditable) => void

Defined in: src/PerspectiveTransform.tsx:76

If edit mode is controlled from outside, this callback is triggered when SHIFT+[toggleKeys] is pressed. Passes the next boolean value for edit mode.

Parameters

nextEditable

boolean

Returns

void


onPointsChange()?

optional onPointsChange: (points) => void

Defined in: src/PerspectiveTransform.tsx:57

Called whenever corner points change, e.g., when a user drags them.

Parameters

points

Points

Returns

void


points?

optional points: Points

Defined in: src/PerspectiveTransform.tsx:52

If provided, points become controlled from outside. The component will always use these points instead of its local state.


storageKey?

optional storageKey: string

Defined in: src/PerspectiveTransform.tsx:64

If set, the component will store and retrieve corner points from localStorage under this key (uncontrolled scenario). If points is controlled, localStorage logic is not used.


toggleKeys?

optional toggleKeys: string[]

Defined in: src/PerspectiveTransform.tsx:82

An array of lowercase keys that, when pressed with SHIFT, toggle edit mode. Defaults to ["p"].