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);
    }}/>

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>
        );
    }
}