fix: buttonClassNames and buttonStyles

README.MD

@@ -1,9 +1,64 @@
-### IN DEVELOPMENT
+# cloudinary-react-widget
 
-## Install package to Next.js app
+Next.js component for [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget)
 
-cd example pnpm install ../
+### Installing
 
-## Watch changes
+I did not release it on NPM for now. So you can install it like this;
 
-cd to root folder and run pnpm watch
+```bash
+pnpm install fers4t/cloudinary-react-widget
+```
+
+### Usage
+
+```tsx
+import React, { useState } from 'react';
+import { CloudinaryUpload } from 'cloudinary-react-widget';
+
+export default function Home() {
+   const [callbacks, setCallbacks] = useState();
+   return (
+      <CloudinaryUpload
+         cloudName="YOUR CLOUD NAME"
+         uploadPreset="YOUR UPLOAD PRESET"
+         onUpload={(a) => setCallbacks(a)}
+      />
+   );
+}
+```
+
+You can track all callbacks with `onUpload` prop. I'm storing all of them.
+
+## Styling
+
+```tsx
+import React, { useState } from 'react';
+import { CloudinaryUpload } from 'cloudinary-react-widget';
+
+export default function Home() {
+   const [callbacks, setCallbacks] = useState();
+
+   return (
+      <CloudinaryUpload
+         cloudName="YOUR CLOUD NAME"
+         uploadPreset="YOUR UPLOAD PRESET"
+         onUpload={(a) => setCallbacks(a)}
+         buttonClassNames="text-lg font-bold"
+         imageWrapperStyles={{ width: '100px', height: '100px' }}
+      />
+   );
+}
+```
+
+Custom styles are **overriding defaults completely**. So if you want to use custom styles, you must handle whole style yourself.
+
+## TO-DO
+
+-  [ ] Add `multiple` prop to prevent/allow multiple uploads.
+-  [ ] Add `signed` version 
+... open issues/PRs for more.
+
+## License
+
+This project is licensed under the MIT License.

src/cloudinary-upload.tsx

@@ -107,7 +107,7 @@ const CloudinaryUpload: React.FC<ICloudinaryUpload> = (props) => {
                               }}
                            />
                            <button
-                              className={`cloudinary-close-btn-${cb.info.etag} ${buttonClassNames || ''}`}
+                              className={`cloudinary-close-btn-${cb.info.etag}`}
                               style={{
                                  // display: 'none',
                                  display: 'flex',
@@ -120,8 +120,7 @@ const CloudinaryUpload: React.FC<ICloudinaryUpload> = (props) => {
                                  outline: 'none',
                                  border: 'none',
                                  padding: '2px',
-                                 cursor: 'pointer',
-                                 ...buttonStyles
+                                 cursor: 'pointer'
                               }}
                               onClick={() => {
                                  // @ts-ignore
@@ -145,7 +144,13 @@ const CloudinaryUpload: React.FC<ICloudinaryUpload> = (props) => {
             )}
 
             <div>
-               <button type="button" id="leftbutton" onClick={openWidget}>
+               <button
+                  type="button"
+                  id="leftbutton"
+                  onClick={openWidget}
+                  className={buttonClassNames || ''}
+                  style={buttonStyles || {}}
+               >
                   Upload Image(s)
                </button>
             </div>