From d0df7a241b59c1bb5e03bcac029d12549079a748 Mon Sep 17 00:00:00 2001
From: Egor Didenko <didenk.egor@gmail.com>
Date: Fri, 1 Nov 2024 16:51:32 -0400
Subject: [PATCH 1/3] feat: bump file-uploader from 1.2.0 to 1.9.0

---
 package-lock.json                             |  8 +-
 packages/react-uploader/package.json          |  2 +-
 .../Uploader/Inline/FileUploaderInline.tsx    |  6 +-
 .../Uploader/Minimal/FileUploaderMinimal.tsx  |  6 +-
 .../Uploader/Regular/FileUploaderRegular.tsx  | 10 +--
 packages/react-uploader/src/Uploader/types.ts | 74 ++++++++++++++-----
 .../src/utils/getCalcPropertyOfProps.ts       | 24 ++++--
 7 files changed, 90 insertions(+), 40 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 030d1ca..a68c839 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2476,9 +2476,9 @@
       }
     },
     "node_modules/@uploadcare/file-uploader": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/@uploadcare/file-uploader/-/file-uploader-1.2.0.tgz",
-      "integrity": "sha512-ME+nzhOcP+SWr6kIqLp/PjfzYyaD5gCM+pNxPxtDJaPh2ncgptZ+CMm5PU/TkcjNB0LJjTO5m5S9CgD2NyGJmg==",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/@uploadcare/file-uploader/-/file-uploader-1.9.0.tgz",
+      "integrity": "sha512-jmdwrfbmVERctmslqitRKfeMvJhJ2a7RbumsvdjqOl5jbXyAYH7YFCQS0FaomLnlWwFzXwtHe4vz7w+AIDleJQ==",
       "dependencies": {
         "@symbiotejs/symbiote": "^1.11.7",
         "@uploadcare/image-shrink": "^6.14.1",
@@ -11283,7 +11283,7 @@
       "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
-        "@uploadcare/file-uploader": "^1.2.0",
+        "@uploadcare/file-uploader": "^1.9.0",
         "@uploadcare/react-adapter": "^0.3.0"
       },
       "peerDependencies": {
diff --git a/packages/react-uploader/package.json b/packages/react-uploader/package.json
index c3d141b..569c6ef 100644
--- a/packages/react-uploader/package.json
+++ b/packages/react-uploader/package.json
@@ -33,7 +33,7 @@
     "next": "13 || 14"
   },
   "dependencies": {
-    "@uploadcare/file-uploader": "^1.2.0",
+    "@uploadcare/file-uploader": "^1.9.0",
     "@uploadcare/react-adapter": "^0.3.0"
   },
   "repository": {
diff --git a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
index 7bdc418..293e8ba 100644
--- a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
+++ b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-inline.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderInline = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderInline: FC<TProps> = ({
+export const FileUploaderInline: FC<TProps<FileUploaderModes.Inline>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderInline: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<FileUploaderModes.Inline>(props),
     [props],
   );
 
diff --git a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
index 07db0f3..e97c694 100644
--- a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
+++ b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-minimal.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderMinimal: FC<TProps> = ({
+export const FileUploaderMinimal: FC<TProps<FileUploaderModes.Minimal>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderMinimal: FC<TProps> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+    () => getCalcPropertyOfProps<FileUploaderModes.Minimal>(props),
     [props],
   );
 
diff --git a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
index fe691ac..b55827d 100644
--- a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
+++ b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-regular.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { TProps } from "../types";
+import type { FileUploaderModes, TProps } from "../types";
 
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
@@ -21,7 +21,7 @@ const AdapterFileUploaderRegular = customElementToReactComponent({
   elClass: UC.FileUploaderRegular,
 });
 
-export const FileUploaderRegular: FC<TProps> = ({
+export const FileUploaderRegular: FC<TProps<FileUploaderModes.Regular>> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,8 +31,8 @@ export const FileUploaderRegular: FC<TProps> = ({
 }) => {
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
-  const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<TProps>(props),
+  const { eventHandlers, config, uploader } = useMemo(
+    () => getCalcPropertyOfProps<FileUploaderModes.Regular>(props),
     [props],
   );
 
@@ -50,7 +50,7 @@ export const FileUploaderRegular: FC<TProps> = ({
           {...eventHandlers}
         />
         {/* @ts-ignore */}
-        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} />
+        <AdapterFileUploaderRegular class={classNameUploader} ctx-name={CTX_NAME} {...uploader} />
       </div>
     </ConditionalSuspense>
   );
diff --git a/packages/react-uploader/src/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts
index 26e540c..286e47b 100644
--- a/packages/react-uploader/src/Uploader/types.ts
+++ b/packages/react-uploader/src/Uploader/types.ts
@@ -14,29 +14,69 @@ type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 
 type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
-export type TEventsSchema = {
-  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
-    event: EventMap[K]["detail"],
-  ) => void;
+export enum FileUploaderModes {
+  Regular = "Regular",
+  Minimal = "Minimal",
+  Inline = "Inline"
+}
+
+export type FileUploaderModesKeys = keyof typeof FileUploaderModes;
+
+type CommonProps = {
+  /**
+   * The class name for wrapper over uploader
+   */
+  className?: string;
+
+  /**
+   * The class name for uploader
+   */
+  classNameUploader?: string;
+
+  /**
+   * The unique ID
+   */
+  ctxName?: string;
 };
 
-type TRefUploadCtxProvider = {
-  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+type FileUploaderRegularProps = {
+  /**
+   * The prop controls the button's visibility in regular mode.
+   */
+  headless?: boolean;
 };
 
-type TPropsWithEvents = Partial<TEventsSchema>;
+type FileUploaderMinimalProps = {};
 
-type TPropsWithConfig = Partial<ConfigType>;
+type FileUploaderInlineProps = {};
 
-type TDefaultProps = {
-  className?: string;
-  classNameUploader?: string;
-  ctxName?: string;
-} & Pick<TPropsConditionalSuspense, "fallback">;
+type UploadCtxPropviderProps = {
+  apiRef?: Ref<InstanceType<UploadCtxProvider>>;
+};
+
+export type EventProps = Partial<TEventsSchema>;
+
+export type ConfigProps = Partial<Omit<ConfigType, "pubkey">> & {
+  pubkey: ConfigType["pubkey"];
+};
 
-export type TProps = TDefaultProps &
-  TRefUploadCtxProvider &
-  TPropsWithEvents &
-  TPropsWithConfig;
+export type TProps<T extends FileUploaderModesKeys> = CommonProps &
+  ConfigProps &
+  EventProps &
+  UploadCtxPropviderProps &
+  Pick<TPropsConditionalSuspense, "fallback"> &
+  (T extends "Regular"
+    ? FileUploaderRegularProps
+    : T extends "Minimal"
+    ? FileUploaderMinimalProps
+    : T extends "Inline"
+    ? FileUploaderInlineProps
+    : never);
 
 export { UploadCtxProvider } from "@uploadcare/file-uploader";
+
+export type TEventsSchema = {
+  [K in keyof EventMap as TPrefixOnAndCamelCase<K>]: (
+    event: EventMap[K]["detail"],
+  ) => void;
+};
diff --git a/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts b/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
index 25fee54..54e3dac 100644
--- a/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
+++ b/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
@@ -1,17 +1,27 @@
-export const getCalcPropertyOfProps = <T extends Object>(props: T) => {
+import type { FileUploaderModesKeys, TProps } from "../Uploader/types";
+
+export const getCalcPropertyOfProps = <T extends FileUploaderModesKeys>(props: TProps<T>) => {
   const eventHandlers: Record<string, unknown> = {};
   const config: Record<string, unknown> = {};
+  const uploader: Record<string, unknown> = {};
+
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop.startsWith("on")) {
+      eventHandlers[prop] = value;
+      continue;
+    }
 
-  Object.entries(props).forEach(([key, value]) => {
-    if (key.startsWith("on")) {
-      eventHandlers[key] = value;
-    } else {
-      config[key] = value;
+    if (prop === "headless") {
+      uploader[prop] = value;
+      continue;
     }
-  });
+
+    config[prop] = value;
+  }
 
   return {
     eventHandlers,
+    uploader,
     config,
   };
 };

From 388386c03d5677d50851a01d74ce98ed164d68f7 Mon Sep 17 00:00:00 2001
From: Egor Didenko <didenk.egor@gmail.com>
Date: Mon, 4 Nov 2024 17:08:07 -0500
Subject: [PATCH 2/3] feat: updated type FileUploaderModes

---
 .../src/Uploader/Inline/FileUploaderInline.tsx           | 6 +++---
 .../src/Uploader/Minimal/FileUploaderMinimal.tsx         | 6 +++---
 .../src/Uploader/Regular/FileUploaderRegular.tsx         | 6 +++---
 packages/react-uploader/src/Uploader/types.ts            | 9 ++-------
 .../react-uploader/src/utils/getCalcPropertyOfProps.ts   | 4 ++--
 5 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
index 293e8ba..bae5b98 100644
--- a/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
+++ b/packages/react-uploader/src/Uploader/Inline/FileUploaderInline.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-inline.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { FileUploaderModes, TProps } from "../types";
+import type { TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderInline = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderInline: FC<TProps<FileUploaderModes.Inline>> = ({
+export const FileUploaderInline: FC<TProps<"Inline">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderInline: FC<TProps<FileUploaderModes.Inline>> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<FileUploaderModes.Inline>(props),
+    () => getCalcPropertyOfProps<"Inline">(props),
     [props],
   );
 
diff --git a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
index e97c694..d8f3114 100644
--- a/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
+++ b/packages/react-uploader/src/Uploader/Minimal/FileUploaderMinimal.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-minimal.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { FileUploaderModes, TProps } from "../types";
+import type { TProps } from "../types";
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
 import {
@@ -20,7 +20,7 @@ const AdapterFileUploaderMinimal = customElementToReactComponent({
   elClass: UC.FileUploaderMinimal,
 });
 
-export const FileUploaderMinimal: FC<TProps<FileUploaderModes.Minimal>> = ({
+export const FileUploaderMinimal: FC<TProps<"Minimal">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -31,7 +31,7 @@ export const FileUploaderMinimal: FC<TProps<FileUploaderModes.Minimal>> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config } = useMemo(
-    () => getCalcPropertyOfProps<FileUploaderModes.Minimal>(props),
+    () => getCalcPropertyOfProps<"Minimal">(props),
     [props],
   );
 
diff --git a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
index b55827d..d8e36cc 100644
--- a/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
+++ b/packages/react-uploader/src/Uploader/Regular/FileUploaderRegular.tsx
@@ -4,7 +4,7 @@ import "@uploadcare/file-uploader/web/uc-file-uploader-regular.min.css";
 import { customElementToReactComponent } from "@uploadcare/react-adapter";
 import { AdapterConfig } from "../core/AdapterConfig";
 import { AdapterUploadCtxProvider } from "../core/AdapterUploadCtxProvider";
-import type { FileUploaderModes, TProps } from "../types";
+import type { TProps } from "../types";
 
 import { getCalcPropertyOfProps } from "../../utils/getCalcPropertyOfProps";
 import { getUserAgentIntegration } from "../../utils/getUserAgentIntegration";
@@ -21,7 +21,7 @@ const AdapterFileUploaderRegular = customElementToReactComponent({
   elClass: UC.FileUploaderRegular,
 });
 
-export const FileUploaderRegular: FC<TProps<FileUploaderModes.Regular>> = ({
+export const FileUploaderRegular: FC<TProps<"Regular">> = ({
   ctxName,
   className,
   classNameUploader,
@@ -32,7 +32,7 @@ export const FileUploaderRegular: FC<TProps<FileUploaderModes.Regular>> = ({
   const CTX_NAME = useMemo(() => ctxName ?? UC.UID.generate(), [ctxName]);
 
   const { eventHandlers, config, uploader } = useMemo(
-    () => getCalcPropertyOfProps<FileUploaderModes.Regular>(props),
+    () => getCalcPropertyOfProps<"Regular">(props),
     [props],
   );
 
diff --git a/packages/react-uploader/src/Uploader/types.ts b/packages/react-uploader/src/Uploader/types.ts
index 286e47b..6019492 100644
--- a/packages/react-uploader/src/Uploader/types.ts
+++ b/packages/react-uploader/src/Uploader/types.ts
@@ -14,13 +14,8 @@ type TExtraPrefixOn<S extends string> = `on${Capitalize<S>}`;
 
 type TPrefixOnAndCamelCase<S extends string> = TExtraPrefixOn<TToCamelCase<S>>;
 
-export enum FileUploaderModes {
-  Regular = "Regular",
-  Minimal = "Minimal",
-  Inline = "Inline"
-}
 
-export type FileUploaderModesKeys = keyof typeof FileUploaderModes;
+export type FileUploaderModes = 'Regular' | 'Minimal' | 'Inline'
 
 type CommonProps = {
   /**
@@ -60,7 +55,7 @@ export type ConfigProps = Partial<Omit<ConfigType, "pubkey">> & {
   pubkey: ConfigType["pubkey"];
 };
 
-export type TProps<T extends FileUploaderModesKeys> = CommonProps &
+export type TProps<T extends FileUploaderModes> = CommonProps &
   ConfigProps &
   EventProps &
   UploadCtxPropviderProps &
diff --git a/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts b/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
index 54e3dac..3a80d37 100644
--- a/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
+++ b/packages/react-uploader/src/utils/getCalcPropertyOfProps.ts
@@ -1,6 +1,6 @@
-import type { FileUploaderModesKeys, TProps } from "../Uploader/types";
+import type { FileUploaderModes, TProps } from "../Uploader/types";
 
-export const getCalcPropertyOfProps = <T extends FileUploaderModesKeys>(props: TProps<T>) => {
+export const getCalcPropertyOfProps = <T extends FileUploaderModes>(props: TProps<T>) => {
   const eventHandlers: Record<string, unknown> = {};
   const config: Record<string, unknown> = {};
   const uploader: Record<string, unknown> = {};

From 60e99d1addc6a0bc4348b836eda3e3f3d31de6a5 Mon Sep 17 00:00:00 2001
From: Egor Didenko <didenk.egor@gmail.com>
Date: Mon, 4 Nov 2024 17:14:27 -0500
Subject: [PATCH 3/3] docs: added classNameUploader in the readme.md

---
 README.md                         | 30 ++++++++++++++++++++----------
 packages/react-uploader/README.md | 28 +++++++++++++++++++---------
 2 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index d0238ae..db0d896 100644
--- a/README.md
+++ b/README.md
@@ -32,7 +32,12 @@ considerations.
 
 ## Quick start
 ### From NPM:
-1. Install the package: `npm install @uploadcare/react-uploader`
+1. Install the package: 
+
+```bash
+npm install @uploadcare/react-uploader
+```
+
 2. Connect React Uploader from your script file:
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
@@ -49,7 +54,7 @@ We provide a full set of props that are used in File Uploader. For review we sug
 
 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 you need to use `InstanceType` utility type to define `apiRef` type.
+It is important to note that we now pass all InstanceType from UploadCtxProvider.
 
 ```jsx
 import React, {useRef, useEffect} from "react";
@@ -60,9 +65,9 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-    const uploaderRef = useRef <InstanceType<UploadCtxProvider> | null>(null);
+  const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
 
-    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+  <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
 ```
 
@@ -78,22 +83,27 @@ import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular
-    pubkey="YOUR_PUBLIC_KEY"
-    onModalOpen={() => {
-        console.log('modal-open')
-    }}
+  pubkey="YOUR_PUBLIC_KEY"
+  onModalOpen={() => {
+      console.log('modal-open')
+  }}
 />
 ```
 
-
 ## Styles
 You can customize the appearance of the React Uploader by using the `className` prop, which lets you apply custom CSS classes to the `FileUploader` wrapper, including the `Regular`, `Minimal`, and `Inline` variations.
 
+However, if you need to assign a class specifically to the uploader file. Use the `classNameUploader` prop.
+
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
-<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
+<FileUploaderRegular 
+  classNameUploader="uc-dark" 
+  className="fileUploaderWrapper" 
+  pubkey="YOUR_PUBLIC_KEY"
+/>;
 ```
 
 ```css
diff --git a/packages/react-uploader/README.md b/packages/react-uploader/README.md
index 7858b51..db0d896 100644
--- a/packages/react-uploader/README.md
+++ b/packages/react-uploader/README.md
@@ -32,7 +32,12 @@ considerations.
 
 ## Quick start
 ### From NPM:
-1. Install the package: `npm install @uploadcare/react-uploader`
+1. Install the package: 
+
+```bash
+npm install @uploadcare/react-uploader
+```
+
 2. Connect React Uploader from your script file:
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
@@ -60,9 +65,9 @@ import {
 import "@uploadcare/react-uploader/core.css";
 
 const Example = () => {
-    const uploaderRef = useRef <InstanceType<UploadCtxProvider> | null>(null);
+  const uploaderRef = useRef<InstanceType<UploadCtxProvider> | null>(null);
 
-    <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
+  <FileUploaderRegular apiRef={uploaderRef} pubkey="YOUR_PUBLIC_KEY"/>;
 }
 ```
 
@@ -78,22 +83,27 @@ import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
 <FileUploaderRegular
-    pubkey="YOUR_PUBLIC_KEY"
-    onModalOpen={() => {
-        console.log('modal-open')
-    }}
+  pubkey="YOUR_PUBLIC_KEY"
+  onModalOpen={() => {
+      console.log('modal-open')
+  }}
 />
 ```
 
-
 ## Styles
 You can customize the appearance of the React Uploader by using the `className` prop, which lets you apply custom CSS classes to the `FileUploader` wrapper, including the `Regular`, `Minimal`, and `Inline` variations.
 
+However, if you need to assign a class specifically to the uploader file. Use the `classNameUploader` prop.
+
 ```jsx
 import { FileUploaderRegular } from "@uploadcare/react-uploader";
 import "@uploadcare/react-uploader/core.css";
 
-<FileUploaderRegular className="fileUploaderWrapper" pubkey="YOUR_PUBLIC_KEY"/>;
+<FileUploaderRegular 
+  classNameUploader="uc-dark" 
+  className="fileUploaderWrapper" 
+  pubkey="YOUR_PUBLIC_KEY"
+/>;
 ```
 
 ```css