feat: add ability to pass custom "id"

adrians5j · Jan 1, 2019 · e5814e3 · e5814e3
1 parent 32bbf98
commit e5814e3
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/src/Files.js b/src/Files.js
@@ -48,7 +48,8 @@ export type FilesRules = {
 };
 
 export type Props = FilesRules & {
-    children: RenderPropParams => React.Node
+    children: RenderPropParams => React.Node,
+    id?: string
 };
 
 class Files extends React.Component<Props> {
@@ -191,7 +192,7 @@ class Files extends React.Component<Props> {
     };
 
     render() {
-        const { multiple, accept } = this.props;
+        const { multiple, accept, id } = this.props;
         return (
             <div>
                 {this.props.children({
@@ -204,7 +205,7 @@ class Files extends React.Component<Props> {
                     getLabelProps: (props: ?Object) => {
                         return {
                             ...props,
-                            htmlFor: this.id
+                            htmlFor: id || this.id
                         };
                     },
                     getDropZoneProps: (props: ?Object) => {
@@ -225,7 +226,7 @@ class Files extends React.Component<Props> {
                     }
                 })}
                 <input
-                    id={this.id}
+                    id={id || this.id}
                     ref={ref => {
                         if (ref) {
                             this.input = ref;

diff --git a/stories/ImageGallery.js b/stories/ImageGallery.js
@@ -89,6 +89,7 @@ class ImageGallery extends React.Component<Props, State> {
                 <example>
                     <div id="wrapper">
                         <Files
+                            id={"image-gallery"}
                             multiple
                             convertToBase64
                             accept={["image/jpg", "image/jpeg", "image/png"]}