This is the archived documentation for Doka Image Editor v7.
Please visit pqina.nl/pintura/docs/ to see documentation for the latest version of Pintura Image Editor.
Setting up Doka Image Editor with React
For a quick start use the React example project included in the product package as a guideline. It includes a normal, modal, and overlay editor example as well as an integration of react-filepond
and Doka Image Editor.
We can install doka
and react-doka
with npm by copying both of the dependencies to the 'local_modules'
folder in the root of our React project and running the following command to install them locally.
npm install --save ./local_modules/react-doka ./local_modules/doka
Now we can import the modules like we normally would and use the React <DokaImageEditor>
, <DokaImageEditorModal>
, and <DokaImageEditorOverlay>
components.
Default implementation example
In the default example below we'll use the getEditorDefaults
method to quickly create an image editor.
This creates a "default" editor that has all available plugins loaded and comes preset with all plugin default options and English locale. Each of these settings can be adjusted freely.
// Import the editor styles
import 'doka/doka.css';
// Import the editor default configuration
import { getEditorDefaults } from 'doka';
// Import the editor component from `react-doka`
import { DokaImageEditor } from 'react-doka';
function App() {
// get default properties
const editorConfig = getEditorDefaults();
return (
<div className="App">
<DokaImageEditor
{...editorConfig}
src="./my-image.jpeg"
imageCropAspectRatio={1}
></DokaImageEditor>
</div>
);
}
export default App;
Events and properties
To handle events we can use camelcase props. This means that to listen for the Doka Image Editor load
event we have to set the onLoad
prop.
<DokaImageEditor onLoad={handleEvent} />
Properties can be used as we would with the normal JavaScript version of the editor.
<DokaImageEditor src="./my-image.jpeg" />
Methods
To run editor methods we need to get a ref
to the editor component. We can do so using the useRef
hook. When the reference is set up we can access the editor
instance.
export default function Example() {
// get a reference to the DokaImageEditor component
const componentRef = useRef(null);
const handleUndo = () => {
// get reference to editor instance
const { editor } = componentRef.current;
// run history.undo()
editor.history.undo();
};
return (
<div className="App">
<button onClick={handleUndo}>Undo</button>
<DokaImageEditor ref={componentRef} src={'./image.jpeg'} />
</div>
);
}
Advanced implementation example
In this example we'll create a custom editor, using a custom set of plugins, locale, and available options.
While this example is a lot more verbose it does allow us to create a more optimal editor package. The build process will tree-shake unused functionality resulting in a smaller build target.
// Import the editor styles
import 'doka/doka.css';
// Import the editor functionality
import {
// Import the default image reader and writer
createDefaultImageReader,
createDefaultImageWriter,
// The method used to register the plugins
setPlugins,
// The plugins we want to use
plugin_crop,
plugin_finetune,
plugin_annotate,
// The user interface and plugin locale objects
locale_en_gb,
plugin_crop_locale_en_gb,
plugin_finetune_locale_en_gb,
plugin_annotate_locale_en_gb,
// Because we use the annotate plugin we also need
// to import the markup editor locale
markup_editor_locale_en_gb,
// Import the default configuration for the markup editor and finetune plugins
markup_editor_defaults,
plugin_finetune_defaults,
} from 'doka';
// Import the editor component from `react-doka`
import { DokaImageEditor } from 'react-doka';
// This registers the plugins with Doka Image Editor
setPlugins(plugin_crop, plugin_finetune, plugin_filter);
// Create our editor configuration
const editorConfig = {
// This will read the image data (required)
imageReader: createDefaultImageReader(),
// This will write the output image
imageWriter: createDefaultImageWriter(),
// The markup editor default options, tools, shape style controls
...markup_editor_defaults,
// The finetune util controls
...plugin_finetune_defaults,
// This will set a square crop aspect ratio
imageCropAspectRatio: 1,
// The icons and labels to use in the user interface (required)
locale: {
...locale_en_gb,
...plugin_crop_locale_en_gb,
...plugin_finetune_locale_en_gb,
...plugin_annotate_locale_en_gb,
...markup_editor_locale_en_gb,
},
};
function App() {
return (
<div className="App">
<DokaImageEditor
{...editorConfig}
src="./my-image.jpeg"
imageCropAspectRatio={1}
></DokaImageEditor>
</div>
);
}
export default App;
Next steps
With the editor set up, we can continue to configure the editor to our liking by adjusting the available options exposed by the editor API