This is the archived documentation for Doka Image Editor v6.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
React
Introduction
The Doka React adapter exposes three different components.
<Doka>
useful for editing images on the page itself.<DokaModal>
will open in a popover on top of the page.<DokaOverlay>
will render on top of another element.
Props supplied to each component are passed on to the Doka core library, they are named exactly like the default instance properties.
// These properties are the same as...
Doka.create({
cropAspectRatio: 1,
cropAllowImageTurnRight: true,
onconfirm: (output) => {
console.log('Crop result', output);
}
})
// ...these properties
<Doka
cropAspectRatio={1}
cropAllowImageTurnRight={true}
onConfirm={(output) => {
console.log('Crop result', output);
}}/>
Callback properties like onconfirm
and oncancel
can be defined with a capital letter after the on
, this means you can write onConfirm
or onconfirm
. Doka will automatically map this to the correct internal function.
Examples
The examples below are included in the project package as demos and should give a good overview of how to use these components and can be used as development starting points.
Doka
The Doka Component can be used to render Doka inline.
import { Doka } from './react-doka';
const toDegrees = (radians) => parseFloat(radians || 0) * (180 / Math.PI);
const toRadians = (degrees) => parseFloat(degrees || 0) * (Math.PI / 180);
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
enabled: false,
src: './assets/photo.jpeg',
crop: {},
};
this.handleDokaConfirm = this.handleDokaConfirm.bind(this);
this.handleDokaCancel = this.handleDokaCancel.bind(this);
this.handleRotationChange = this.handleRotationChange.bind(this);
this.handleZoomChange = this.handleZoomChange.bind(this);
}
handleDokaConfirm(output) {}
handleDokaCancel() {}
handleRotationChange(e) {
this.setState({
crop: {
...this.state.crop,
rotation: toRadians(e.target.value),
},
});
}
handleZoomChange(e) {
this.setState({
crop: {
...this.state.crop,
zoom: Math.max(1, e.target.value),
},
});
}
render() {
const { src, crop } = this.state;
return (
<div>
<div>
<label>
Rotation
<input
type="number"
step="15"
value={Math.round(
toDegrees(this.state.crop.rotation)
)}
onChange={this.handleRotationChange}
/>
</label>
</div>
<div>
<label>
Zoom
<input
type="number"
step=".5"
value={Math.max(1, this.state.crop.zoom || 1)}
onChange={this.handleZoomChange}
/>
</label>
</div>
<Doka
style={{ width: '640px', height: '480px' }}
crop={crop}
src={src}
onConfirm={this.handleDokaConfirm}
onCancel={this.handleDokaCancel}
/>
</div>
);
}
}
DokaModal
The DokaModal component opens Doka in a popover on top of the current page.
import { DokaModal } from './react-doka';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
enabled: false,
src: './assets/photo.jpeg',
result: null,
};
this.handleDokaConfirm = this.handleDokaConfirm.bind(this);
this.handleDokaCancel = this.handleDokaCancel.bind(this);
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
this.setState({
enabled: !this.state.enabled,
});
}
handleDokaConfirm(output) {
this.setState({
enabled: false,
result: output.file,
});
}
handleDokaCancel() {
this.setState({
enabled: false,
});
}
render() {
const { enabled, src, result } = this.state;
return (
<div>
<button onClick={this.handleToggle}>Toggle Modal</button>
{enabled && (
<DokaModal
src={src}
onConfirm={this.handleDokaConfirm}
onCancel={this.handleDokaCancel}
/>
)}
{result && <img src={toURL(result)} alt="" />}
</div>
);
}
}
DokaOverlay
The DokaOverlay component renders on top on another image. This is useful when editing an image in place.
import { DokaOverlay } from './react-doka';
class Demo extends React.Component {
constructor(props) {
super(props);
this.state = {
image: './assets/photo-preview.jpeg',
enabled: false,
src: './assets/photo.jpeg',
crop: {
aspectRatio: 0.5,
rotation: -1.5707963268,
},
};
this.handleDokaConfirm = this.handleDokaConfirm.bind(this);
this.handleDokaCancel = this.handleDokaCancel.bind(this);
this.handleToggle = this.handleToggle.bind(this);
}
handleToggle() {
this.setState({
enabled: !this.state.enabled,
});
}
handleDokaConfirm(output) {
this.setState({
image: output.file,
crop: output.data.crop,
enabled: false,
});
}
handleDokaCancel() {
this.setState({
enabled: false,
});
}
render() {
const { image, enabled, crop, src } = this.state;
return (
<div>
<button onClick={this.handleToggle}>Toggle Overlay</button>
<DokaOverlay
style={{ maxWidth: '40em' }}
crop={crop}
src={src}
enabled={enabled}
onConfirm={this.handleDokaConfirm}
onCancel={this.handleDokaCancel}
>
<img src={toURL(image)} alt="" />
</DokaOverlay>
</div>
);
}
}