feat: add messages prop to change some static texts

README.md

@@ -57,6 +57,7 @@ export default DragDrop;
 | label        | string           | the label (text) for your form (if exist) inside the uploading box - first word underlined                                                                                  | `"Upload or drop a file right here"`                      |
 | required     | boolean          | Conditionally set the input field as required | `true` or `false`|
 | disabled     | boolean          | this for disabled the input                                                                                         | `true OR false`                                           |
+| hideTypes     | boolean          | set this to true to hide the UI showing types                                                                                         | `true OR false`                                           |
 | hoverTitle   | string           | text appears(hover) when trying to drop a file                                                                      | `"Drop here"`                                             |
 | fileOrFiles         | Array<File> or File or null     | this mainly made because if you would like to remove uploaded file(s) pass null or pass another file as initial        |
 | classes      | string           | string with the classes wished to add                                                                               | `"drop_area drop_zone"`                                   |
@@ -71,6 +72,7 @@ export default DragDrop;
 | handleChange | function         | function that will be called when the user selects or drops file(s)                                                    | `(file) => console.log(file)`                             |
 | onDraggingStateChange | function         | function that will be called with the state of dragging                                                    | `(dragging) => console.log(dragging)`                             |
 | dropMessageStyle | CSS Properties         | A CSS property to style the hover message                                                    | `{backgroundColor: 'red'}`                             |
+| messages | object         | Object to change the static texts                                                    | `{disabled?: string, uploaded?: string,upload_another?: string, error?: string, drop?: string, upload?: string, or_message?: string}`                             |
 
 ## How to contribute:
   - Please follow the instructions inside this file: [here](CONTRIBUTION.md)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-drag-drop-files",
-  "version": "2.3.10",
+  "version": "2.3.11",
   "description": "Light React Drag & Drop files and images library styled by styled-components",
   "author": "Karim <karimmokhtar28@gmail.com>",
   "license": "MIT",

src/FileUploader.tsx

@@ -11,6 +11,16 @@ import DrawTypes from './DrawTypes';
 import ImageAdd from './ImageAdd';
 import useDragging from './useDragging';
 
+type MessagesTypes = {
+  disabled?: string
+  uploaded?: string
+  upload_another?: string
+  error?: string
+  drop?: string
+  upload?: string
+  or_message?: string
+}
+
 type Props = {
   name?: string;
   hoverTitle?: string;
@@ -22,8 +32,10 @@ type Props = {
   fileOrFiles?: Array<File> | File | null;
   disabled?: boolean | false;
   label?: string | undefined;
+  hideTypes: boolean
   multiple?: boolean | false;
   required?: boolean | false;
+  messages?: MessagesTypes;
   onSizeError?: (arg0: string) => void;
   onTypeError?: (arg0: string) => void;
   onDrop?: (arg0: File | Array<File>) => void;
@@ -50,14 +62,15 @@ const drawDescription = (
   uploaded: boolean,
   typeError: boolean,
   disabled: boolean | undefined,
-  label: string | undefined
+  label: string | undefined,
+  messages?: MessagesTypes
 ) => {
   return typeError ? (
-    <span>File type/size error, Hovered on types!</span>
+    <span>{messages?.error||'File type/size error, Hovered on types!'}</span>
   ) : (
     <Description>
       {disabled ? (
-        <span>Upload disabled</span>
+        <span>{messages?.disabled||'Upload disabled'}</span>
       ) : !currFile && !uploaded ? (
         <>
           {label ? (
@@ -67,13 +80,13 @@ const drawDescription = (
             </>
           ) : (
             <>
-              <span>Upload</span> or drop a file right here
+              <span>{messages?.upload||'Upload'}</span> {messages?.or_message||'or drop a file right here'}
             </>
           )}
         </>
       ) : (
         <>
-          <span>Uploaded Successfully!</span> Upload another?
+          <span>{messages?.uploaded||'Uploaded Successfully!'}</span> {messages?.upload_another||'Upload another?'}
         </>
       )}
     </Description>
@@ -98,6 +111,7 @@ const drawDescription = (
     onTypeError,
     disabled,
     label,
+    messages
     multiple,
     required,
     onDraggingStateChange
@@ -121,8 +135,10 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
     onDrop,
     disabled,
     label,
+    hideTypes,
     multiple,
     required,
+    messages,
     onDraggingStateChange,
     dropMessageStyle
   } = props;
@@ -237,15 +253,15 @@ const FileUploader: React.FC<Props> = (props: Props): JSX.Element => {
       />
       {dragging && (
         <HoverMsg style={dropMessageStyle}>
-          <span>{hoverTitle || 'Drop Here'}</span>
+          <span>{messages?.drop || hoverTitle || 'Drop Here'}</span>
         </HoverMsg>
       )}
       {!children && (
         <>
           <ImageAdd />
           <DescriptionWrapper error={error}>
-            {drawDescription(currFiles, uploaded, error, disabled, label)}
-            <DrawTypes types={types} minSize={minSize} maxSize={maxSize} />
+            {drawDescription(currFiles, uploaded, error, disabled, label, messages)}
+            {!hideTypes && <DrawTypes types={types} minSize={minSize} maxSize={maxSize} />}
           </DescriptionWrapper>
         </>
       )}