Allow className and disabled options to be added to button.

README.md

@@ -39,6 +39,7 @@ const Example = () => {
               borderRadius: '4px',
               height: '25px'
             }} // inline styling only or style id='cloudinary_upload_button'
+        className="border-gray-200 border-radius-5" // add classes to the button
         folder={'my_folder'} // set cloudinary folder name to send file
         cropping={false} // set ability to crop images -> default = true
         // https://support.cloudinary.com/hc/en-us/articles/203062071-How-to-crop-images-via-the-Upload-Widget-#:~:text=Click%20on%20the%20%22Edit%22%20link,OK%22%20and%20Save%20the%20changes.

package.json

@@ -22,7 +22,7 @@
     "deploy": "gh-pages -d example/build"
   },
   "peerDependencies": {
-    "react": "^16.9.0",
+    "react": "^16.9.0 || ^17.0.0",
     "axios": "^0.20.0"
   },
   "devDependencies": {

src/components/UploadWidget.js

@@ -11,6 +11,8 @@ const UploadWidget = ({
   buttonText = null,
   style = null,
   widgetStyles = null,
+  className = '',
+  disabled = false,
   folder = null,
   cropping = true,
   generateSignatureUrl,
@@ -66,6 +68,8 @@ const UploadWidget = ({
       buttonText={buttonText}
       buttonType={buttonType}
       style={style}
+      className={className}
+      disabled={disabled}
     />
   )
 }

src/components/WidgetButton.js

@@ -1,6 +1,6 @@
 import React from 'react'
 
-const WidgetButton = ({ myWidgetFunction, style, buttonText, buttonType }) => (
+const WidgetButton = ({ myWidgetFunction, style, className = '', disabled, buttonText, buttonType }) => (
   <>
     <button
       type={buttonType}
@@ -15,6 +15,8 @@ const WidgetButton = ({ myWidgetFunction, style, buttonText, buttonType }) => (
           height: '25px'
         }
       }
+      className={className}
+      disabled={disabled}
       onClick={() => myWidgetFunction()}
     >
       {buttonText || 'Upload files'}