Skip to content

Commit c4cdc2a

Browse files
rolandjitsurolandjitsu
committed
docs: add doka integration
- use flat badge for test status and gitpod - show sidebar on docs site - add favicon to docs site
1 parent bb42b94 commit c4cdc2a

File tree

6 files changed

+188
-5
lines changed

6 files changed

+188
-5
lines changed

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
open_collective: react-dropzone

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
# react-dropzone
44

55
[![npm](https://img.shields.io/npm/v/react-dropzone.svg?style=flat-square)](https://www.npmjs.com/package/react-dropzone)
6-
![Build Status](https://github.com/react-dropzone/react-dropzone/workflows/Test/badge.svg)
6+
[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/react-dropzone/react-dropzone/Test?label=tests&style=flat-square)](https://github.com/react-dropzone/react-dropzone/actions?query=workflow%3ATest)
77
[![codecov](https://img.shields.io/codecov/c/gh/react-dropzone/react-dropzone/master.svg?style=flat-square)](https://codecov.io/gh/react-dropzone/react-dropzone)
88
[![Open Collective](https://img.shields.io/opencollective/backers/react-dropzone.svg?style=flat-square)](#backers)
99
[![Open Collective](https://img.shields.io/opencollective/sponsors/react-dropzone.svg?style=flat-square)](#sponsors)
10-
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/react-dropzone/react-dropzone)
10+
[![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod&style=flat-square)](https://gitpod.io/#https://github.com/react-dropzone/react-dropzone)
1111

1212
Simple React hook to create a HTML5-compliant drag'n'drop zone for files.
1313

@@ -292,6 +292,11 @@ function mockData(files) {
292292

293293
More examples for this can be found in `react-dropzone`s own [test suites](https://github.com/react-dropzone/react-dropzone/blob/master/src/index.spec.js).
294294

295+
## Need image editing?
296+
297+
React Dropzone integrates perfectly with [Doka Image Editor](https://pqina.nl/doka/?ref=react-dropzone), creating a modern image editing experience. Doka supports crop aspect ratios, resizing, rotating, cropping, annotating, filtering, and much more.
298+
299+
Checkout the [integration example](https://react-dropzone.js.org/#!/Doka).
295300

296301
## Support
297302

‎examples/doka/README.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
If you'd like to integrate the dropzone with the [doka](https://pqina.nl/doka/?ref=react-dropzone) image editor, you just need to pass either of the selected images to the `create()` method exported by doka:
2+
3+
```jsx harmony
4+
import React, {useEffect, useState} from 'react';
5+
import {useDropzone} from 'react-dropzone';
6+
7+
import {create} from 'doka';
8+
9+
const thumbsContainer = {
10+
display: "flex",
11+
flexDirection: "row",
12+
flexWrap: "wrap",
13+
marginTop: 16,
14+
padding: 20
15+
};
16+
17+
const thumb = {
18+
position: "relative",
19+
display: "inline-flex",
20+
borderRadius: 2,
21+
border: "1px solid #eaeaea",
22+
marginBottom: 8,
23+
marginRight: 8,
24+
width: 100,
25+
height: 100,
26+
padding: 4,
27+
boxSizing: "border-box"
28+
};
29+
30+
const thumbInner = {
31+
display: "flex",
32+
minWidth: 0,
33+
overflow: "hidden"
34+
};
35+
36+
const img = {
37+
display: "block",
38+
width: "auto",
39+
height: "100%"
40+
};
41+
42+
const thumbButton = {
43+
position: "absolute",
44+
right: 10,
45+
bottom: 10,
46+
background: "rgba(0,0,0,.8)",
47+
color: "#fff",
48+
border: 0,
49+
borderRadius: ".325em",
50+
cursor: "pointer"
51+
};
52+
53+
const editImage = (image, done) => {
54+
const imageFile = image.doka ? image.doka.file : image;
55+
const imageState = image.doka ? image.doka.data : {};
56+
create({
57+
// recreate previous state
58+
...imageState,
59+
60+
// load original image file
61+
src: imageFile,
62+
outputData: true,
63+
64+
onconfirm: ({ file, data }) => {
65+
Object.assign(file, {
66+
doka: { file: imageFile, data }
67+
});
68+
done(file);
69+
}
70+
});
71+
};
72+
73+
function Doka(props) {
74+
const [files, setFiles] = useState([]);
75+
const { getRootProps, getInputProps } = useDropzone({
76+
accept: "image/*",
77+
onDrop: (acceptedFiles) => {
78+
setFiles(
79+
acceptedFiles.map((file) =>
80+
Object.assign(file, {
81+
preview: URL.createObjectURL(file)
82+
})
83+
)
84+
);
85+
}
86+
});
87+
88+
const thumbs = files.map((file, index) => (
89+
<div style={thumb} key={file.name}>
90+
<div style={thumbInner}>
91+
<img src={file.preview} style={img} alt="" />
92+
</div>
93+
<button
94+
style={thumbButton}
95+
onClick={() =>
96+
editImage(file, (output) => {
97+
const updatedFiles = [...files];
98+
99+
// replace original image with new image
100+
updatedFiles[index] = output;
101+
102+
// revoke preview URL for old image
103+
if (file.preview) URL.revokeObjectURL(file.preview);
104+
105+
// set new preview URL
106+
Object.assign(output, {
107+
preview: URL.createObjectURL(output)
108+
});
109+
110+
// update view
111+
setFiles(updatedFiles);
112+
})
113+
}
114+
>
115+
edit
116+
</button>
117+
</div>
118+
));
119+
120+
useEffect(
121+
() => () => {
122+
// Make sure to revoke the data uris to avoid memory leaks
123+
files.forEach((file) => URL.revokeObjectURL(file.preview));
124+
},
125+
[files]
126+
);
127+
128+
return (
129+
<section className="container">
130+
<div {...getRootProps({ className: "dropzone" })}>
131+
<input {...getInputProps()} />
132+
<p>Drag 'n' drop some files here, or click to select files</p>
133+
</div>
134+
<aside style={thumbsContainer}>{thumbs}</aside>
135+
</section>
136+
);
137+
}
138+
139+
<Doka />
140+
```

‎styleguide.config.js‎

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,25 @@ const { createConfig, babel, css, devServer } = require('webpack-blocks')
66
module.exports = {
77
title: 'react-dropzone',
88
styleguideDir: path.join(__dirname, 'styleguide'),
9+
template: {
10+
favicon: 'https://github.com/react-dropzone/react-dropzone/raw/master/logo/logo.png'
11+
},
912
webpackConfig: createConfig([babel(), css(), devServer({
1013
disableHostCheck: true,
1114
host: '0.0.0.0',
1215
})]),
1316
exampleMode: 'expand',
1417
usageMode: 'expand',
15-
showSidebar: false,
18+
showSidebar: true,
1619
serverPort: 8080,
1720
moduleAliases: {
18-
'react-dropzone': path.resolve(__dirname, './src')
21+
'react-dropzone': path.resolve(__dirname, './src'),
22+
'doka': path.resolve(__dirname, './vendor/doka/doka.esm.min.js')
1923
},
20-
require: [path.join(__dirname, 'examples/theme.css')],
24+
require: [
25+
path.join(__dirname, 'examples/theme.css'),
26+
path.join(__dirname, 'vendor/doka/doka.min.css'),
27+
],
2128
sections: [
2229
{
2330
name: '',
@@ -69,6 +76,15 @@ module.exports = {
6976
content: 'examples/plugins/README.md'
7077
}
7178
]
79+
},
80+
{
81+
name: 'Integrations',
82+
sections: [
83+
{
84+
name: 'Doka',
85+
content: 'examples/doka/README.md'
86+
}
87+
]
7288
}
7389
]
7490
}

‎vendor/doka/doka.esm.min.js‎

Lines changed: 10 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎vendor/doka/doka.min.css‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)