@uploadcare/react-uploader 0.2.0-alpha.0 → 0.3.0

package/README.md

@@ -6,44 +6,120 @@
       alt="">
 </a>
 
-Uploadcare React Uploader. Allows you to use Uploader in React applications according to React canons.
-
+Welcome to the Uploadcare React Uploader documentation!
+This library allows you to seamlessly integrate Uploadcare file uploader into your React applications while adhering to
+React principles.
 
 [![Build Status][badge-build]][build-url]
 [![NPM version][npm-img]][npm-url]
 [![GitHub release][badge-release-img]][badge-release-url]
 [![Uploadcare stack on StackShare][badge-stack-img]][badge-stack-url]
 
+* [Summary about project](#summary-about-project)
+* [Quick Features](#quick-features)
+* [Install](#install)
+* [Common](#common)
+    * [Usage](#usage)
+        * [Regular](#regular)
+        * [Inline](#inline)
+        * [Minimal](#minimal)
+    * [Props API](#props-api)
+    * [Styles](#styles)
+    * [File Uploader API](#file-uploader-api)
+    * [Events](#events)
+* [Security issues](#security-issues)
+* [Feedback](#feedback)
+
+## Summary about project
+
+This documentation provides guidance on how to use the Uploadcare React Uploader in your projects, along with details
+about its features, installation process, usage examples, customization options, event handling, and security
+considerations.
+
+## Quick Features
+
+- Seamless integration with React applications
+- Three different upload options: Regular, Inline, and Minimal
+- Customizable styles
+- Access to File Uploader API
+- Comprehensive event handling
 
 ## Install
 
-```
+```bash
 npm i @uploadcare/react-uploader
 ```
 
 ## Usage
 
+The Uploadcare React Uploader offers three main components for integration.
+Each component serves specific use cases and can be easily implemented into your project.
+
+### Regular
+
 ```jsx
-import { FileUploaderRegular } from "@uploadcare/react-uploader";
+import {FileUploaderRegular} from "@uploadcare/react-uploader";
 
 <FileUploaderRegular pubkey="YOUR_PUBLIC_KEY"/>;
 ```
 
+### Inline
+
+```jsx
+import {FileUploaderInline} from "@uploadcare/react-uploader";
+
+<FileUploaderInline pubkey="YOUR_PUBLIC_KEY"/>;
+```
+
+### Minimal
+
+```jsx
+import {FileUploaderMinimal} from "@uploadcare/react-uploader";
+
+<FileUploaderMinimal pubkey="YOUR_PUBLIC_KEY"/>;
+```
+
+## Props API
+
+An easy way to connect React-Uploader to your project and utilize the available API props.
+We provide a full set of props that are used in blocks. For review we suggest you to look at
+the [documentation](uc-docs-file-uploader-options).
+
+## Styles
+
+You can customize the appearance of the React uploader using the className prop, which allows you to add custom CSS
+classes to the uploader `FileUploader[Regular | Minimal | Inline]` wrapper.
+
+```jsx
+import {FileUploaderRegular} from "@uploadcare/react-uploader";
+
+<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
+```
+
+```css
+.fileUploaderWrapper lr-file-uploader-regular {
+}
+```
+
 ## File Uploader API
 
-It is possible to get ref on UploadCtxProvider via `ref`. In this way it is possible to additional uploader management
-methods.
+For convenience, we provide the ability to access the File Uploader API using `apiRef`.
+You can see what methods are available in `apiRef` in the [documentation][uc-docs-file-uploader-api].
+It is important to note that we now pass all InstanceType from UploadCtxProvider.
 
 ```jsx
-import React, { useRef } from "react";
+import React, {useRef, useEffect} from "react";
 import {
     FileUploaderRegular,
     UploadCtxProvider
 } from "@uploadcare/react-uploader";
 
-const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
+const Example = () => {
+    const uploaderRef = useRef < InstanceType < UploadCtxProvider > | null > (null);
 
-<FileUploaderRegular refUploadCtxProvider={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+
+    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+}
 ```
 
 ## Events
@@ -57,7 +133,7 @@ The principle of converting events from blocks to React Uploader:
 Example:
 
 ```jsx
-import { FileUploaderRegular } from "@uploadcare/react-uploader";
+import {FileUploaderRegular} from "@uploadcare/react-uploader";
 
 <FileUploaderRegular
     pubkey="YOUR_PUBLIC_KEY"
@@ -109,12 +185,23 @@ request at [hello@uploadcare.com][uc-email-hello].
 [uc-email-hello]: mailto:hello@uploadcare.com
 
 [badge-stack-img]: https://img.shields.io/badge/tech-stack-0690fa.svg?style=flat
+
 [badge-stack-url]: https://stackshare.io/uploadcare/stacks/
+
 [badge-release-img]: https://img.shields.io/github/release/uploadcare/react-components.svg
+
 [badge-release-url]: https://github.com/uploadcare/react-components/releases
+
 [npm-img]: http://img.shields.io/npm/v/@uploadcare/react-uploader.svg
+
 [npm-url]: https://www.npmjs.com/package/@uploadcare/react-uploader
+
 [badge-build]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml/badge.svg
+
 [build-url]: https://github.com/uploadcare/react-components/actions/workflows/checks.yml
 
 [uc-docs-events]: https://uploadcare.com/docs/file-uploader/events/
+
+[uc-docs-file-uploader-api]: https://uploadcare.com/docs/file-uploader/api
+
+[uc-docs-file-uploader-options]: https://uploadcare.com/docs/file-uploader/options/