Skip to content

Commit dea205c

Browse files
egordidenkogithub-actions[bot]
egordidenko
and
github-actions[bot]
authored
docs: added describe props api, styles, react-uploader-api via ref (#14) (#15)
* docs: added describe props api, styles, react-uploader-api via ref (#14) * docs: added describe props api, styles, react-uploader-api via ref * feat: added className for wrapper * docs: added describe summary and Quick Features * feat: added userAgentIntegration * chore(release): publish - @uploadcare/[email protected] - @uploadcare/[email protected] * feat: updated getUserAgentIntegration * fix: renamed refUploadCtxProvider to apiRef --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
1 parent 0897b41 commit dea205c

File tree

11 files changed

+159
-48
lines changed

11 files changed

+159
-48
lines changed

‎package-lock.json‎

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

‎packages/react-adapter/CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# 0.2.0 (2024-04-25)
7+
8+
### Features
9+
10+
- **react-uploader:** added readme.md ([#5](https://github.com/uploadcare/react-components/issues/5)) ([65c17c4](https://github.com/uploadcare/react-components/commit/65c17c43f7ef611a27def9cbd08bfbd4b2df889e))
11+
12+
### Performance Improvements
13+
14+
- improve code and refactoring props ([#4](https://github.com/uploadcare/react-components/issues/4)) ([38870da](https://github.com/uploadcare/react-components/commit/38870dac59b0141299d678b352c0d2f43a245451)), closes [#3](https://github.com/uploadcare/react-components/issues/3) [#2](https://github.com/uploadcare/react-components/issues/2) [#1](https://github.com/uploadcare/react-components/issues/1)
15+
616
# 0.2.0-alpha.0 (2024-04-15)
717

818
### Features

‎packages/react-adapter/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@uploadcare/react-adapter",
3-
"version": "0.2.0-alpha.0",
3+
"version": "0.2.0",
44
"private": false,
55
"type": "module",
66
"files": [

‎packages/react-uploader/CHANGELOG.md‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,16 @@
33
All notable changes to this project will be documented in this file.
44
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
55

6+
# 0.2.0 (2024-04-25)
7+
8+
### Features
9+
10+
- **react-uploader:** added readme.md ([#5](https://github.com/uploadcare/react-components/issues/5)) ([65c17c4](https://github.com/uploadcare/react-components/commit/65c17c43f7ef611a27def9cbd08bfbd4b2df889e))
11+
12+
### Performance Improvements
13+
14+
- improve code and refactoring props ([#4](https://github.com/uploadcare/react-components/issues/4)) ([38870da](https://github.com/uploadcare/react-components/commit/38870dac59b0141299d678b352c0d2f43a245451)), closes [#3](https://github.com/uploadcare/react-components/issues/3) [#2](https://github.com/uploadcare/react-components/issues/2) [#1](https://github.com/uploadcare/react-components/issues/1)
15+
616
# 0.2.0-alpha.0 (2024-04-15)
717

818
### Features

‎packages/react-uploader/README.md‎

Lines changed: 97 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -6,44 +6,120 @@
66
alt="">
77
</a>
88

9-
Uploadcare React Uploader. Allows you to use Uploader in React applications according to React canons.
10-
9+
Welcome to the Uploadcare React Uploader documentation!
10+
This library allows you to seamlessly integrate Uploadcare file uploader into your React applications while adhering to
11+
React principles.
1112

1213
[![Build Status][badge-build]][build-url]
1314
[![NPM version][npm-img]][npm-url]
1415
[![GitHub release][badge-release-img]][badge-release-url]
1516
[![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]
1617

18+
* [Summary about project](#summary-about-project)
19+
* [Quick Features](#quick-features)
20+
* [Install](#install)
21+
* [Common](#common)
22+
* [Usage](#usage)
23+
* [Regular](#regular)
24+
* [Inline](#inline)
25+
* [Minimal](#minimal)
26+
* [Props API](#props-api)
27+
* [Styles](#styles)
28+
* [File Uploader API](#file-uploader-api)
29+
* [Events](#events)
30+
* [Security issues](#security-issues)
31+
* [Feedback](#feedback)
32+
33+
## Summary about project
34+
35+
This documentation provides guidance on how to use the Uploadcare React Uploader in your projects, along with details
36+
about its features, installation process, usage examples, customization options, event handling, and security
37+
considerations.
38+
39+
## Quick Features
40+
41+
- Seamless integration with React applications
42+
- Three different upload options: Regular, Inline, and Minimal
43+
- Customizable styles
44+
- Access to File Uploader API
45+
- Comprehensive event handling
1746

1847
## Install
1948

20-
```
49+
```bash
2150
npm i @uploadcare/react-uploader
2251
```
2352

2453
## Usage
2554

55+
The Uploadcare React Uploader offers three main components for integration.
56+
Each component serves specific use cases and can be easily implemented into your project.
57+
58+
### Regular
59+
2660
```jsx
27-
import { FileUploaderRegular } from "@uploadcare/react-uploader";
61+
import {FileUploaderRegular} from "@uploadcare/react-uploader";
2862

2963
<FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>;
3064
```
3165

66+
### Inline
67+
68+
```jsx
69+
import {FileUploaderInline} from "@uploadcare/react-uploader";
70+
71+
<FileUploaderInline pubkey="YOUR_PUBLIC_KEY"/>;
72+
```
73+
74+
### Minimal
75+
76+
```jsx
77+
import {FileUploaderMinimal} from "@uploadcare/react-uploader";
78+
79+
<FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY"/>;
80+
```
81+
82+
## Props API
83+
84+
An easy way to connect React-Uploader to your project and utilize the available API props.
85+
We provide a full set of props that are used in blocks. For review we suggest you to look at
86+
the [documentation](uc-docs-file-uploader-options).
87+
88+
## Styles
89+
90+
You can customize the appearance of the React uploader using the className prop, which allows you to add custom CSS
91+
classes to the uploader `FileUploader[Regular | Minimal | Inline]` wrapper.
92+
93+
```jsx
94+
import {FileUploaderRegular} from "@uploadcare/react-uploader";
95+
96+
<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
97+
```
98+
99+
```css
100+
.fileUploaderWrapper lr-file-uploader-regular {
101+
}
102+
```
103+
32104
## File Uploader API
33105

34-
It is possible to get ref on UploadCtxProvider via `ref`. In this way it is possible to additional uploader management
35-
methods.
106+
For convenience, we provide the ability to access the File Uploader API using `apiRef`.
107+
You can see what methods are available in `apiRef` in the [documentation][uc-docs-file-uploader-api].
108+
It is important to note that we now pass all InstanceType from UploadCtxProvider.
36109

37110
```jsx
38-
import React, { useRef } from "react";
111+
import React, {useRef, useEffect} from "react";
39112
import {
40113
FileUploaderRegular,
41114
UploadCtxProvider
42115
} from "@uploadcare/react-uploader";
43116

44-
const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
117+
const Example = () => {
118+
const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);
45119

46-
<FileUploaderRegular refUploadCtxProvider={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
120+
121+
<FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
122+
}
47123
```
48124

49125
## Events
@@ -57,7 +133,7 @@ The principle of converting events from blocks to React Uploader:
57133
Example:
58134

59135
```jsx
60-
import { FileUploaderRegular } from "@uploadcare/react-uploader";
136+
import {FileUploaderRegular} from "@uploadcare/react-uploader";
61137

62138
<FileUploaderRegular
63139
pubkey="YOUR_PUBLIC_KEY"
@@ -109,12 +185,23 @@ request at [[email protected]][uc-email-hello].
109185
[uc-email-hello]: mailto:[email protected]
110186

111187
[badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat
188+
112189
[badge-stack-url]: https://stackshare.io/uploadcare/stacks/
190+
113191
[badge-release-img]: https://img.shields.io/github/release/uploadcare/react-components.svg
192+
114193
[badge-release-url]: https://github.com/uploadcare/react-components/releases
194+
115195
[npm-img]: http://img.shields.io/npm/v/@uploadcare/react-uploader.svg
196+
116197
[npm-url]: https://www.npmjs.com/package/@uploadcare/react-uploader
198+
117199
[badge-build]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml/badge.svg
200+
118201
[build-url]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml
119202

120203
[uc-docs-events]: https://uploadcare.com/docs/file-uploader/events/
204+
205+
[uc-docs-file-uploader-api]: https://uploadcare.com/docs/file-uploader/api
206+
207+
[uc-docs-file-uploader-options]: https://uploadcare.com/docs/file-uploader/options/

‎packages/react-uploader/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@uploadcare/react-uploader",
3-
"version": "0.2.0-alpha.0",
3+
"version": "0.2.0",
44
"private": false,
55
"type": "module",
66
"files": [

‎packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { FC, useMemo } from "react";
1+
import React, { type FC, useMemo } from "react";
22
import * as LR from "@uploadcare/blocks";
33
import { customElementToReactComponent } from "@uploadcare/react-adapter";
44
import { AdapterConfig } from "../core/AdapterConfig";
55
import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
66
import type { TProps } from "../types";
77
import { getStyleSource } from "../default";
88
import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
9+
import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
910

1011
LR.registerBlocks(LR);
1112

@@ -19,30 +20,28 @@ const CSS_SRC_INLINE = getStyleSource("inline");
1920
export const FileUploaderInline: FC<TProps> = ({
2021
ctxName,
2122
className,
22-
refUploadCtxProvider,
23+
apiRef,
2324
...props
2425
}) => {
25-
const CTX_NAME = useMemo(
26-
() => ctxName ?? LR.UID.generate(),
27-
[ctxName, LR.UID.generate],
28-
);
26+
const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
2927

3028
const { eventHandlers, config } = useMemo(
3129
() => getCalcPropertyOfProps<TProps>(props),
3230
[props],
3331
);
3432

3533
return (
36-
<React.Fragment>
37-
<AdapterConfig ctx-name={CTX_NAME} {...config} />
34+
<div className={className}>
35+
{/* @ts-ignore */}
36+
<AdapterConfig userAgentIntegration={getUserAgentIntegration()} ctx-name={CTX_NAME} {...config} />
3837
{/* @ts-ignore */}
3938
<AdapterUploadCtxProvider
40-
ref={refUploadCtxProvider}
39+
ref={apiRef}
4140
ctx-name={CTX_NAME}
4241
{...eventHandlers}
4342
/>
4443

4544
<AdapterFileUploaderInline ctx-name={CTX_NAME} css-src={CSS_SRC_INLINE} />
46-
</React.Fragment>
45+
</div>
4746
);
4847
};

‎packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import React, { FC, useMemo } from "react";
1+
import React, { type FC, useMemo } from "react";
22
import * as LR from "@uploadcare/blocks";
33
import { customElementToReactComponent } from "@uploadcare/react-adapter";
44
import { AdapterConfig } from "../core/AdapterConfig";
55
import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
66
import type { TProps } from "../types";
77
import { getStyleSource } from "../default";
88
import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
9+
import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
910

1011
LR.registerBlocks(LR);
1112

@@ -20,32 +21,30 @@ const CSS_SRC_MINIMAL = getStyleSource("minimal");
2021
export const FileUploaderMinimal: FC<TProps> = ({
2122
ctxName,
2223
className,
23-
refUploadCtxProvider,
24+
apiRef,
2425
...props
2526
}) => {
26-
const CTX_NAME = useMemo(
27-
() => ctxName ?? LR.UID.generate(),
28-
[ctxName, LR.UID.generate],
29-
);
27+
const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
3028

3129
const { eventHandlers, config } = useMemo(
3230
() => getCalcPropertyOfProps<TProps>(props),
3331
[props],
3432
);
3533

3634
return (
37-
<React.Fragment>
38-
<AdapterConfig ctx-name={CTX_NAME} {...config} />
35+
<div className={className}>
36+
{/* @ts-ignore */}
37+
<AdapterConfig userAgentIntegration={getUserAgentIntegration()} ctx-name={CTX_NAME} {...config} />
3938
{/* @ts-ignore */}
4039
<AdapterUploadCtxProvider
41-
ref={refUploadCtxProvider}
40+
ref={apiRef}
4241
ctx-name={CTX_NAME}
4342
{...eventHandlers}
4443
/>
4544
<AdapterFileUploaderMinimal
4645
ctx-name={CTX_NAME}
4746
css-src={CSS_SRC_MINIMAL}
4847
/>
49-
</React.Fragment>
48+
</div>
5049
);
5150
};

‎packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx‎

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { FC, useMemo } from "react";
1+
import React, { type FC, useMemo } from "react";
22
import * as LR from "@uploadcare/blocks";
33
import { customElementToReactComponent } from "@uploadcare/react-adapter";
44
import { AdapterConfig } from "../core/AdapterConfig";
@@ -7,6 +7,7 @@ import { getStyleSource } from "../default";
77
import type { TProps } from "../types";
88

99
import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
10+
import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration.ts";
1011

1112
LR.registerBlocks(LR);
1213

@@ -21,32 +22,30 @@ const CSS_SRC_REGULAR = getStyleSource("regular");
2122
export const FileUploaderRegular: FC<TProps> = ({
2223
ctxName,
2324
className,
24-
refUploadCtxProvider,
25+
apiRef,
2526
...props
2627
}) => {
27-
const CTX_NAME = useMemo(
28-
() => ctxName ?? LR.UID.generate(),
29-
[ctxName, LR.UID.generate],
30-
);
28+
const CTX_NAME = useMemo(() => ctxName ?? LR.UID.generate(), [ctxName]);
3129

3230
const { eventHandlers, config } = useMemo(
3331
() => getCalcPropertyOfProps<TProps>(props),
3432
[props],
3533
);
3634

3735
return (
38-
<React.Fragment>
39-
<AdapterConfig ctx-name={CTX_NAME} {...config} />
36+
<div className={className}>
37+
{/* @ts-ignore */}
38+
<AdapterConfig userAgentIntegration={getUserAgentIntegration()} ctx-name={CTX_NAME} {...config} />
4039
{/* @ts-ignore */}
4140
<AdapterUploadCtxProvider
42-
ref={refUploadCtxProvider}
41+
ref={apiRef}
4342
ctx-name={CTX_NAME}
4443
{...eventHandlers}
4544
/>
4645
<AdapterFileUploaderRegular
4746
ctx-name={CTX_NAME}
4847
css-src={CSS_SRC_REGULAR}
4948
/>
50-
</React.Fragment>
49+
</div>
5150
);
5251
};

0 commit comments

Comments
 (0)