Skip to content

Commit b0b79ca

Browse files
igoradamenkoigoradamenko
authored
Merge pull request #1 from igoradamenko/improvement/react-example
Improve React example
2 parents 5349361 + 72a52e6 commit b0b79ca

16 files changed

+1048
-94
lines changed

Diff for: ‎examples/react-uploader/README.md

+68-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,73 @@
1-
# Blocks ❤️ React
1+
<p align="center">
2+
<a href="https://uploadcare.com/?ref=github-react-example-readme">
3+
<picture>
4+
<source media="(prefers-color-scheme: light)" srcset="./assets/media/logo-safespace-transparent.svg">
5+
<source media="(prefers-color-scheme: dark)" srcset="./assets/media/logo-transparent-inverted.svg">
6+
<img width=250 alt="Uploadcare logo" src="./assets/media/logo-safespace-transparent.svg">
7+
</picture>
8+
</a>
9+
</p>
10+
<p align="center">
11+
<a href="https://uploadcare.com?ref=github-readme">Website</a> •
12+
<a href="https://uploadcare.com/docs/start/quickstart?ref=github-readme">Quick Start</a> •
13+
<a href="https://uploadcare.com/docs?ref=github-readme">Docs</a> •
14+
<a href="https://uploadcare.com/blog?ref=github-readme">Blog</a> •
15+
<a href="https://discord.gg/mKWRgRsVz8?ref=github-readme">Discord</a> •
16+
<a href="https://twitter.com/Uploadcare?ref=github-readme">Twitter</a>
17+
</p>
18+
19+
# React File Uploader with Uploadcare Blocks
220

321
[![Edit react-uploader](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/uploadcare/blocks-examples/tree/main/examples/react-uploader/)
422

23+
This is an example project of implementing a file uploader in a React application with [Uploadcare Blocks](https://github.com/uploadcare/blocks).
24+
25+
## Installation
26+
27+
All you need to do is to install [`@uploadcare/blocks`](https://www.npmjs.com/package/@uploadcare/blocks) from npm
28+
via your favorite Node package manager.
29+
30+
The package provides TypeScript types, so you do not need to install `@types/anything` if you need a proper typing.
31+
32+
[Read more about installation](https://uploadcare.com/docs/file-uploader/installation/) in the Uploadcare documentation.
33+
34+
## Configutration
35+
36+
Please, read the [File Uploader documentation](https://uploadcare.com/docs/file-uploader/).
37+
538
## Integration notes
639

7-
WIP
40+
Blocks are native to the Web but not to React. It's easy to use Blocks in a React app, but note that a part of your solution will encapsulate non-React code.
41+
42+
In this example we created a [FileUploader](./src/FileUploader/FileUploader.tsx) component
43+
which provides React-friendly API for the rest of the app. There are Blocks inside of this component and nowhere else.
44+
45+
### Non-React things you should know about
46+
47+
1. Communicate with Blocks File Uploader with [events](https://uploadcare.com/docs/file-uploader/data-and-events/).
48+
You will find them in the example. It's easy to handle using hooks like [`useEffect`](https://react.dev/reference/react/useEffect).
49+
50+
2. Use `class` attribute instead of `className`.
51+
52+
3. Some attributes required by Blocks are kebab-cased, not camelCased as usual for React world.
53+
54+
4. You are able to invoke [some methods of File Uploader](https://uploadcare.com/docs/file-uploader/api/)
55+
to control its behavior.
56+
57+
### Styling
58+
59+
If your styling solution may provide class string or style object, feel free to use them on blocks like
60+
`lr-file-uploader-regular` and override default class using CSS variables.
61+
62+
Otherwise you may go “full override” way and pass a string with styles to a File Uploader type of your choice.
63+
64+
[Read more about styling](https://uploadcare.com/docs/file-uploader/styling/) in the File Uploader docs.
65+
66+
## Contribution
67+
68+
You’re always welcome to contribute:
69+
70+
* Create [issues](https://github.com/uploadcare/blocks/issues) every time you feel something is missing or goes wrong.
71+
* Provide your feedback or drop us a support request at <a href="mailto:[email protected]">[email protected]</a>.
72+
* Ask questions on [Stack Overflow](https://stackoverflow.com/questions/tagged/uploadcare) with "uploadcare" tag if others can have these questions as well.
73+
* Star this repo if you like it ⭐️

Diff for: ‎examples/react-uploader/index.html

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,8 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
65
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + React + TS</title>
6+
<title>Uploadcare React Example</title>
87
</head>
98
<body>
109
<div id="root"></div>

Diff for: ‎examples/react-uploader/package.json

+6-3
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,21 @@
44
"version": "0.0.0",
55
"type": "module",
66
"scripts": {
7-
"dev": "vite",
7+
"dev": "vite --force",
88
"build": "tsc && vite build",
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@uploadcare/blocks": "0.25.6",
12+
"@uploadcare/blocks": "0.27.6",
13+
"classnames": "2.3.2",
1314
"react": "^18.2.0",
14-
"react-dom": "^18.2.0"
15+
"react-dom": "^18.2.0",
16+
"react-toggle": "4.1.3"
1517
},
1618
"devDependencies": {
1719
"@types/react": "^18.0.35",
1820
"@types/react-dom": "^18.0.11",
21+
"@types/react-toggle": "4.0.4",
1922
"@vitejs/plugin-react": "^3.1.0",
2023
"typescript": "^5.0.4",
2124
"vite": "^4.2.1"

Diff for: ‎examples/react-uploader/src/App.module.css

-13
This file was deleted.

Diff for: ‎examples/react-uploader/src/App.module.scss

+158
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
.app {
2+
padding: 16px 24px;
3+
max-width: 480px;
4+
margin: 0 auto;
5+
}
6+
7+
.header {
8+
margin-bottom: 48px;
9+
display: flex;
10+
justify-content: space-between;
11+
}
12+
13+
.themeToggle {
14+
:global(.react-toggle-track) {
15+
box-shadow: 0 0 16px 0 var(--ui-control-box-shadow-color);
16+
background-color: var(--ui-control-background-color);
17+
border: 1px solid var(--ui-control-border-color-default);
18+
transition: none;
19+
}
20+
21+
&:global(.react-toggle:hover .react-toggle-track),
22+
&:global(.react-toggle--checked:hover .react-toggle-track) {
23+
background-color: var(--ui-control-background-color);
24+
border: 1px solid var(--ui-control-border-color-default);
25+
outline: 2px solid var(--ui-control-outline-color-focus);
26+
}
27+
28+
:global(.react-toggle-track-check), :global(.react-toggle-track-x) {
29+
width: auto;
30+
height: auto;
31+
display: flex;
32+
align-items: center;
33+
}
34+
35+
:global(.react-toggle-track-check) {
36+
left: 6px;
37+
}
38+
39+
:global(.react-toggle-track-x) {
40+
right: 8px;
41+
}
42+
43+
:global(.react-toggle-thumb) {
44+
top: 2px;
45+
left: 2px;
46+
background: var(--ui-control-background-color);
47+
border-color: var(--ui-control-border-color-default);
48+
transition: left 0.25s ease;
49+
}
50+
51+
&:global(.react-toggle--checked .react-toggle-thumb) {
52+
left: 28px;
53+
}
54+
55+
&:global(.react-toggle--active .react-toggle-thumb),
56+
&:global(.react-toggle:active .react-toggle-thumb) {
57+
box-shadow: none;
58+
}
59+
60+
&:global(.react-toggle--focus .react-toggle-thumb) {
61+
box-shadow: none;
62+
}
63+
}
64+
65+
.viewTitle {
66+
margin: 0;
67+
font-size: 16px;
68+
font-weight: 400;
69+
color: var(--ui-text-color);
70+
}
71+
72+
.input {
73+
box-sizing: border-box;
74+
width: 100%;
75+
padding: 8px 12px;
76+
font-family: monospace;
77+
font-size: 16px;
78+
border: 1px solid var(--ui-control-border-color-default);
79+
border-radius: 8px;
80+
background: var(--ui-control-background-color);
81+
box-shadow: 0 0 16px 0 var(--ui-control-box-shadow-color);
82+
color: var(--ui-control-text-color);
83+
84+
&:focus {
85+
outline: 3px solid var(--ui-control-outline-color-focus);
86+
border-color: var(--ui-control-border-color-focus);
87+
}
88+
89+
// trying to prevent scrollbar overflowing textarea borders =/
90+
&::-webkit-scrollbar-corner {
91+
display: none;
92+
}
93+
}
94+
95+
.field {
96+
margin-top: 24px;
97+
98+
&:last-child {
99+
margin-top: 48px;
100+
}
101+
}
102+
103+
.label {
104+
position: relative;
105+
z-index: 1;
106+
display: block;
107+
margin-bottom: 8px;
108+
color: var(--ui-text-color);
109+
}
110+
111+
.button {
112+
font-size: 16px;
113+
font-family: monospace;
114+
line-height: 1;
115+
padding: 10px 12px;
116+
border: 1px solid var(--ui-control-border-color-default);
117+
border-radius: 8px;
118+
box-shadow: 0 0 16px 0 var(--ui-control-box-shadow-color);
119+
background: var(--ui-action-button-background);
120+
color: var(--ui-action-button-text-color);
121+
cursor: pointer;
122+
123+
&:hover, &:focus {
124+
outline: 3px solid var(--ui-control-outline-color-focus);
125+
}
126+
127+
&:active {
128+
border-color: var(--ui-control-border-color-focus);
129+
}
130+
}
131+
132+
.result {
133+
font-size: 14px;
134+
line-height: 18px;
135+
font-family: monospace;
136+
white-space: pre-wrap;
137+
}
138+
139+
/*
140+
Note: Localization of File Uploader is done via CSS variables.
141+
You can change any piece of text of File Uploader this way.
142+
143+
See more: https://uploadcare.com/docs/file-uploader/localization/
144+
*/
145+
.fileUploader {
146+
// TODO: rewrite other texts related to plural nouns
147+
--l10n-upload-file: 'Upload photo';
148+
--l10n-upload-files: 'Upload photos';
149+
--l10n-choose-file: 'Choose photo';
150+
--l10n-choose-files: 'Choose photos';
151+
--l10n-drop-files-here: 'Drop photos here';
152+
--l10n-select-file-source: 'Select photo source';
153+
--l10n-edit-image: 'Edit photo';
154+
--l10n-no-files: 'No photos selected';
155+
--l10n-caption-edit-file: 'Edit photo';
156+
--l10n-files-count-allowed: 'Only {{count}} photos are allowed';
157+
--l10n-files-max-size-limit-error: 'Photo is too big. Max photo size is {{maxFileSize}}.';
158+
}

0 commit comments

Comments
 (0)