Run prettier

Author: ljwagerfield

README.md

@@ -4,18 +4,18 @@
   </a>
 </h1>
 
-<p align="center"><b>React File & Image Uploader</b><br/> (React Wrapper for <a href="https://upload.io/uploader">Uploader</a>)</p>
+<p align="center"><b>React File Upload Component</b><br/> (React Wrapper for <a href="https://upload.io/uploader">Uploader</a>)</p>
 <br/>
 <p align="center">
-  <a href="https://github.com/upload-js/uploader/">
+  <a href="https://github.com/upload-io/uploader/">
     <img src="https://img.shields.io/badge/gzipped-29%20kb-4ba0f6" />
   </a>
 
   <a href="https://www.npmjs.com/package/uploader">
     <img src="https://img.shields.io/badge/uploader-npm-4ba0f6" />
   </a>
 
-  <a href="https://github.com/upload-js/uploader/actions/workflows/ci.yml">
+  <a href="https://github.com/upload-io/uploader/actions/workflows/ci.yml">
     <img src="https://img.shields.io/badge/build-passing-4ba0f6" />
   </a>
 
@@ -28,7 +28,7 @@
     <img src="https://img.shields.io/badge/TypeScript-included-4ba0f6" />
   </a>
 
-  <a href="https://github.com/upload-js/uploader/actions/workflows/ci.yml">
+  <a href="https://github.com/upload-io/uploader/actions/workflows/ci.yml">
     <img src="https://img.shields.io/npms-io/maintenance-score/upload-js?color=4ba0f6" />
   </a>
 
@@ -38,6 +38,34 @@
 
 </p>
 
+# Quick Start
+
+
+```shell
+npm install react-uploader
+```
+
+```javascript
+const { UploadButton } = require("react-uploader");
+const { Uploader } = require("uploader");
+
+const uploader = new Uploader({
+  apiKey: "free" // Get production API keys from Upload.io
+});
+
+<UploadButton uploader={uploader}
+              options={{multi: true}}
+              onComplete={files => console.log(files)}>
+  {({onClick}) =>
+    <button onClick={onClick}>
+      Upload a file...
+    </button>
+  }
+</UploadButton>
+```
+
+# Documentation
+
 ## Installation
 
 Install via NPM:
@@ -58,9 +86,7 @@ Or via a `<script>` tag:
 <script src="https://js.upload.io/react-uploader/v1"></script>
 ```
 
-## Usage
-
-### Initialize
+## Initialization
 
 Initialize once at the start of your application:
 
@@ -74,9 +100,11 @@ const uploader = new Uploader({
 });
 ```
 
-### Render a File Upload Component
+## Using the File Upload Components
+
+`react-uploader` provides two UI components:
 
-#### Option 1: Render a File Upload Button
+### Option 1: Creating a File Upload Button
 
 ```javascript
 // Ignore if installed via a script tag.
@@ -93,7 +121,7 @@ const { UploadButton } = require("react-uploader");
 </UploadButton>
 ```
 
-#### Option 2: Render a Dropzone
+### Option 2: Creating a Dropzone
 
 ```javascript
 // Ignore if installed via a script tag.
@@ -106,7 +134,7 @@ const { UploadDropzone } = require("react-uploader");
                 height="375px" />
 ```
 
-### The Result
+## The Result
 
 The `onComplete` callback returns a `Array<UploaderResult>`:
 
@@ -140,13 +168,13 @@ The `onComplete` callback returns a `Array<UploaderResult>`:
 
 `react-uploader` is a wrapper for `uploader`.
 
-Please see: **[Uploader Docs](https://github.com/upload-js/uploader#%EF%B8%8F-configuration)**.
+Please see: **[Uploader Docs](https://github.com/upload-io/uploader#%EF%B8%8F-configuration)**.
 
 ## Contribute
 
 If you would like to contribute to Uploader:
 
-1. Add a [GitHub Star](https://github.com/upload-js/uploader/stargazers) to the project (if you're feeling generous!).
+1. Add a [GitHub Star](https://github.com/upload-io/uploader/stargazers) to the project (if you're feeling generous!).
 2. Determine whether you're raising a bug, feature request or question.
 3. Raise your issue or PR.
 

jest.config.pretest.js

@@ -2,12 +2,12 @@ global.console = {
   log: () => undefined, // console.log are ignored in tests
 
   // Keep native behaviour for other methods, use those to print out things in your own tests, not `console.log`
-  error: (e) => {
+  error: e => {
     if (e.includes("Rendering components directly into document.body")) {
       // Silence React "render in body" warning.
-      return
+      return;
     }
-    console.error(e)
+    console.error(e);
   },
   warn: console.warn,
   info: console.info,

package.json

@@ -10,10 +10,10 @@
   "readmeFilename": "README.md",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/upload-js/react-uploader.git"
+    "url": "git+https://github.com/upload-io/react-uploader.git"
   },
   "bugs": {
-    "url": "https://github.com/upload-js/react-uploader/issues"
+    "url": "https://github.com/upload-io/react-uploader/issues"
   },
   "files": [
     "*"

src/UploadButton.tsx

@@ -1,26 +1,29 @@
-import {Uploader, UploaderResult, UploaderOptions} from "uploader";
+import { Uploader, UploaderResult, UploaderOptions } from "uploader";
 
 interface MouseEventLite {
-  preventDefault: () => void
+  preventDefault: () => void;
 }
 
 interface Props {
-  children: (props: {onClick: (event: MouseEventLite) => void}) => JSX.Element
-  onComplete?: (files: UploaderResult[]) => void
-  options?: UploaderOptions
-  uploader: Uploader
+  children: (props: { onClick: (event: MouseEventLite) => void }) => JSX.Element;
+  onComplete?: (files: UploaderResult[]) => void;
+  options?: UploaderOptions;
+  uploader: Uploader;
 }
 
-export const UploadButton = ({uploader, options, onComplete, children}: Props): JSX.Element => {
+export const UploadButton = ({ uploader, options, onComplete, children }: Props): JSX.Element => {
   const onClick = (e: MouseEventLite): void => {
-    e.preventDefault()
+    e.preventDefault();
 
-    uploader.open(options).then(files => {
-      if (onComplete !== undefined) {
-        onComplete(files)
-      }
-    }, error => console.error("Uploader error.", error))
-  }
+    uploader.open(options).then(
+      files => {
+        if (onComplete !== undefined) {
+          onComplete(files);
+        }
+      },
+      error => console.error("Uploader error.", error)
+    );
+  };
 
-  return children({onClick})
-}
+  return children({ onClick });
+};

src/UploadDropzone.tsx

@@ -1,31 +1,41 @@
-import {Uploader, UploaderResult, UploaderOptions} from "uploader";
-import React, {useLayoutEffect} from "react";
-import {useElementRef} from "react-uploader/Utils";
+import { Uploader, UploaderResult, UploaderOptions } from "uploader";
+import React, { useLayoutEffect } from "react";
+import { useElementRef } from "react-uploader/Utils";
 
 interface Props {
   height?: string;
-  onComplete?: (files: UploaderResult[]) => void
-  options?: UploaderOptions
-  uploader: Uploader
+  onComplete?: (files: UploaderResult[]) => void;
+  options?: UploaderOptions;
+  uploader: Uploader;
   width?: string;
 }
 
-export const UploadDropzone = ({uploader, options, onComplete, width, height}: Props): JSX.Element => {
+export const UploadDropzone = ({ uploader, options, onComplete, width, height }: Props): JSX.Element => {
   const [element, elementRef] = useElementRef();
 
   useLayoutEffect(() => {
     if (element !== undefined) {
-      uploader.open({
-        ...options,
-        container: element,
-        layout: "inline"
-      }).then(files => {
-        if (onComplete !== undefined) {
-          onComplete(files)
-        }
-      }, error => console.error("Uploader error.", error))
+      uploader
+        .open({
+          ...options,
+          container: element,
+          layout: "inline"
+        })
+        .then(
+          files => {
+            if (onComplete !== undefined) {
+              onComplete(files);
+            }
+          },
+          error => console.error("Uploader error.", error)
+        );
     }
-  }, [element])
+  }, [element]);
 
-  return <div ref={elementRef} style={{position: "relative", width: "100%", maxWidth: width ?? "600px", height: "375px" ?? height}} />
-}
+  return (
+    <div
+      ref={elementRef}
+      style={{ position: "relative", width: "100%", maxWidth: width ?? "600px", height: "375px" ?? height }}
+    />
+  );
+};

src/Utils.ts

@@ -1,4 +1,4 @@
-import {useCallback, useState} from "react";
+import { useCallback, useState } from "react";
 
 export function useElementRef(): [HTMLElement | undefined, (e: HTMLElement | null) => void] {
   const [element, setElement] = useState<HTMLElement | undefined>(undefined);

tests/UploadButton.test.tsx

@@ -1,41 +1,42 @@
-import { UploadButton } from 'react-uploader/UploadButton';
+import { UploadButton } from "react-uploader/UploadButton";
 import React from "react";
-import {Uploader} from "uploader";
-import {configure, mount} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
+import { Uploader } from "uploader";
+import { configure, mount } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
 
-(global as any).ResizeObserver = require('resize-observer-polyfill')
-const uploader = new Uploader({apiKey: "free"})
+(global as any).ResizeObserver = require("resize-observer-polyfill");
+const uploader = new Uploader({ apiKey: "free" });
 configure({ adapter: new Adapter() });
 
 describe("UploadButton Component", () => {
-
   test("Renders the given child", () => {
-    const html = mount(<UploadButton uploader={uploader}>{({onClick}) => <button onClick={onClick}>Click Me</button>}</UploadButton>);
-    expect(html.text()).toEqual('Click Me');
-  })
+    const html = mount(
+      <UploadButton uploader={uploader}>{({ onClick }) => <button onClick={onClick}>Click Me</button>}</UploadButton>
+    );
+    expect(html.text()).toEqual("Click Me");
+  });
 
   test("Displays the Uploader modal when clicked", async () => {
     const html = mount(
       <div>
-        <UploadButton uploader={uploader} options={{container: "#container"}}>
-          {({onClick}) => <button onClick={onClick}>Click Me</button>}
+        <UploadButton uploader={uploader} options={{ container: "#container" }}>
+          {({ onClick }) => <button onClick={onClick}>Click Me</button>}
         </UploadButton>
         <div id="container" />
       </div>,
       { attachTo: document.body }
     );
 
-    html.find("button").simulate('click');
+    html.find("button").simulate("click");
 
     await tick();
 
-    expect(html.html()).toContain('Upload a File');
-  })
-})
+    expect(html.html()).toContain("Upload a File");
+  });
+});
 
 async function tick(): Promise<void> {
   await new Promise(resolve => {
     setTimeout(resolve, 1000);
-  })
+  });
 }

tests/UploadDropzone.test.tsx

@@ -1,23 +1,23 @@
 import React from "react";
-import {Uploader} from "uploader";
-import {configure, mount} from 'enzyme';
-import Adapter from 'enzyme-adapter-react-16';
-import {UploadDropzone} from "react-uploader/UploadDropzone";
+import { Uploader } from "uploader";
+import { configure, mount } from "enzyme";
+import Adapter from "enzyme-adapter-react-16";
+import { UploadDropzone } from "react-uploader/UploadDropzone";
 
-(global as any).ResizeObserver = require('resize-observer-polyfill')
-const uploader = new Uploader({apiKey: "free"})
+(global as any).ResizeObserver = require("resize-observer-polyfill");
+const uploader = new Uploader({ apiKey: "free" });
 configure({ adapter: new Adapter() });
 
 describe("UploadDropzone Component", () => {
   test("Renders the Uploader component inline", async () => {
     const html = mount(<UploadDropzone uploader={uploader} />, { attachTo: document.body });
     await tick();
-    expect(html.html()).toContain('Upload a File');
-  })
-})
+    expect(html.html()).toContain("Upload a File");
+  });
+});
 
 async function tick(): Promise<void> {
   await new Promise(resolve => {
     setTimeout(resolve, 1000);
-  })
+  });
 }