render prop intro. removed dafault class name and active drag class name.

Author: asabhaney

demo/Gallery.js

@@ -12,6 +12,7 @@ const Gallery = () => {
          <h1>Example 2 - Gallery</h1>
          <Files
             className="files-dropzone-gallery"
+            dragActiveClassName="files-dropzone-active"
             onChange={handleChange}
             accepts={['image/*']}
             multiple
@@ -21,13 +22,13 @@ const Gallery = () => {
             )}
             {files.length > 0 && (
                <div className="files-gallery">
-                  {files.map((file) =>
+                  {files.map(file => (
                      <img
                         key={file.id}
                         className="files-gallery-item"
                         src={file.preview.url}
                      />
-                  )}
+                  ))}
                </div>
             )}
          </Files>

demo/ListWithUpload.js

@@ -37,6 +37,7 @@ const ListWithUpload = () => {
          <h1>Example 1 - List</h1>
          <Files
             className="files-dropzone-list"
+            dragActiveClassName="files-dropzone-active"
             style={{ height: '100px' }}
             onChange={handleChange}
             multiple

demo/RenderProps.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import Files from '../src'
+
+const RenderProps = () => (
+   <div>
+      <h1>Example 3 - Render Props</h1>
+      <Files
+         accepts={['image/*']}
+         multiple
+         style={{ height: '100px', width: '200px' }}>
+         {isDragging => (
+            <div
+               style={{
+                  width: '100%',
+                  height: '100%',
+                  background: isDragging ? 'red' : 'white',
+                  border: '1px dashed #D3D3D3'
+               }}>
+               {isDragging && 'Drop Here!'}
+               {!isDragging && 'Ready'}
+            </div>
+         )}
+      </Files>
+   </div>
+)
+
+export default RenderProps

demo/index.js

@@ -1,11 +1,13 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import ListWithUpload from './ListWithUpload'
-import Gallery from './Gallery'
+import ListWithUploadExample from './ListWithUpload'
+import GalleryExample from './Gallery'
+import RenderPropsExample from './RenderProps'
 
-ReactDOM.render(
+ReactDOM.render((
    <div>
-      <ListWithUpload />
-      <Gallery />
+      <ListWithUploadExample />
+      <GalleryExample />
+      <RenderPropsExample />
    </div>
-, document.getElementById('container'))
+), document.getElementById('container'))

dist/index.js

@@ -0,0 +1,3 @@
+Breaking Changes:
+- No default `className` or `dragActiveClassName`
+- No internal state management

migration.md

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useCallback, useRef, useState } from 'react'
 import PropTypes from 'prop-types'
 import fileExtension from './utils/fileExtension'
 import fileSizeReadable from './utils/fileSizeReadable'
@@ -25,6 +25,7 @@ const Files = ({
    const idCounter = useRef(1)
    const dropzoneElement = useRef()
    const inputElement = useRef()
+   const [isDragging, setDragging] = useState(false)
 
    const handleError = (error, file) => {
       onError(error, file)
@@ -37,15 +38,29 @@ const Files = ({
 
    const handleDragEnter = (event) => {
       const el = dropzoneElement.current
-      el.className = `${el.className} ${dragActiveClassName}`
+      if (dragActiveClassName && !el.className.includes(dragActiveClassName)) {
+         el.className = `${el.className} ${dragActiveClassName}`
+      }
+
+      if (typeof children === 'function') {
+         setDragging(true)
+      }
+
       if (onDragEnter) {
          onDragEnter(event)
       }
    }
 
    const handleDragLeave = (event) => {
       const el = dropzoneElement.current
-      el.className = el.className.replace(` ${dragActiveClassName}`, '')
+      if (dragActiveClassName) {
+         el.className = el.className.replace(` ${dragActiveClassName}`, '')
+      }
+
+      if (typeof children === 'function') {
+         setDragging(false)
+      }
+
       if (onDragLeave) {
          onDragLeave(event)
       }
@@ -164,7 +179,7 @@ const Files = ({
             onDragEnter={handleDragEnter}
             onDragLeave={handleDragLeave}
             style={style}>
-            {children}
+            {typeof children === 'function' ? children(isDragging) : children}
          </div>
       </>
    )
@@ -173,6 +188,7 @@ const Files = ({
 Files.propTypes = {
    accepts: PropTypes.array,
    children: PropTypes.oneOfType([
+      PropTypes.func,
       PropTypes.arrayOf(PropTypes.node),
       PropTypes.node
    ]),
@@ -193,9 +209,9 @@ Files.propTypes = {
 
 Files.defaultProps = {
    accepts: null,
-   className: 'files-dropzone',
+   className: undefined,
    clickable: true,
-   dragActiveClassName: 'files-dropzone-active',
+   dragActiveClassName: undefined,
    multiple: true,
    maxFiles: Infinity,
    maxFileSize: Infinity,