33 <img alt="React Uploader" width="264" height="106" src="https://raw.githubusercontent.com/upload-io/react-uploader/main/.github/assets/logo.svg">
44 </a >
55</h1 >
6-
76<p align =" center " ><b >React File Upload Widget</b ><br /> (With Integrated Cloud Storage)</p >
8-
9- <p align =" center " >React Wrapper for <a href =" https://upload.io/uploader " >Uploader</a > • Developed by <a href =" https://upload.io/ " >Upload.io</a ><br /><br /></p >
10-
7+ <br />
118<p align =" center " >
129 <a href =" https://github.com/upload-io/react-uploader/ " >
13- <img src="https://img.shields.io/badge/gzipped-29 %20kb-4ba0f6" />
10+ <img src="https://img.shields.io/badge/gzipped-6 %20kb-4ba0f6" />
1411 </a >
1512
1613 <a href =" https://www.npmjs.com/package/react-uploader " >
17- <img src="https://img.shields.io/badge/react--uploader -npm-4ba0f6" />
14+ <img src="https://img.shields.io/badge/upload--js -npm-4ba0f6" />
1815 </a >
1916
2017 <a href =" https://github.com/upload-io/react-uploader/actions/workflows/ci.yml " >
3936 </a >
4037
4138</p >
42-
43-
4439<h1 align =" center " >
45- Quick Start —
40+ Get Started —
4641 <a href =" https://codepen.io/upload-js/pen/popWJpX?editors=0010 " >
4742 Try on CodePen
4843 </a >
4944</h1 >
5045
5146<p align =" center " ><a href =" https://upload.io/uploader " ><img alt =" Upload Widget Demo " width =" 100% " src =" https://raw.githubusercontent.com/upload-io/react-uploader/main/.github/assets/demo.webp " ></a ></p >
5247
53- <p align =" center " >To implement the above widget:</p >
54-
55- ``` shell
56- npm install react-uploader
57- ```
48+ <p align =" center " >100% Serverless File Upload Widget <br /> Powered by <a href =" https://upload.io/ " >Upload.io</a ><br /><br /></p >
5849
59- ``` javascript
60- import { Uploader } from " uploader" ;
61- import { UploadButton } from " react-uploader" ;
50+ <hr />
6251
63- const uploader = Uploader ({
64- // Get production API keys from Upload.io
65- apiKey: " free"
66- });
52+ <p align =" center " ><a href =" https://upload.io/dmca " rel =" nofollow " >DMCA Compliant</a > • <a href =" https://upload.io/dpa " rel =" nofollow " >GDPR Compliant</a > • <a href =" https://upload.io/sla " rel =" nofollow " >99.9% Uptime SLA</a >
53+ <br />
54+ <b >Supports:</b > Rate Limiting, Volume Limiting, File Size & ; Type Limiting, JWT Auth, and more...
55+ <br />
56+ </p >
6757
68- < UploadButton uploader= {uploader}
69- options= {{multi: true }}
70- onComplete= {files => console .log (files)}>
71- {({onClick}) =>
72- < button onClick= {onClick}>
73- Upload a file...
74- < / button>
75- }
76- < / UploadButton>
77- ```
58+ <hr />
59+ <br />
60+ <br />
7861
7962# Installation
8063
@@ -96,6 +79,8 @@ Or via a `<script>` tag:
9679<script src =" https://js.upload.io/react-uploader/v2" ></script >
9780```
9881
82+ # Usage
83+
9984## UploadButton — [ Try on CodePen] ( https://codepen.io/upload-js/pen/popWJpX?editors=0010 )
10085
10186The ` UploadButton ` component uses a [ render prop] ( https://reactjs.org/docs/render-props.html ) to provide an ` onClick ` callback to your button element.
0 commit comments