react-dropzone - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

 /**
  * @jsx React.DOM
  */
-'use strict';
 
 var React = require('react');
 
-var component = React.createClass({
-
+var Dropzone = React.createClass({
   getInitialState: function() {
@@ -16,3 +14,3 @@ return {
 
-  dragLeaveHandler: function(e) {
+  handleDragLeave: function(e) {
     this.setState({
@@ -23,6 +21,6 @@ isDragActive: false
 
-  dragOverHandler: function(e) {
+  handleDragOver: function(e) {
     e.preventDefault();
     e.dataTransfer.dropEffect = "copy";
-    
+
     this.setState({
@@ -33,3 +31,3 @@ isDragActive: true
 
-  dropHandler: function(e) {
+  handleDrop: function(e) {
     e.preventDefault();
@@ -44,36 +42,38 @@
       this.props.handler(file);
+    } else {
+      console.error('No handler specified to accept the dropped file.');
     }
   },
-
   render: function() {
 
     var size = this.props.size || "100pt";
-    var dropzoneStyle = {
-      width: size,
-      height: size,
-      borderRadius: "10%",
-      borderWidth: "2pt",
-      borderColor: "#666",
-      borderStyle: this.state.isDragActive ? "solid" : "dashed"
-    };
+      var dropzoneStyle = this.props.children ? {} : {
+        width: size,
+        height: size,
+        borderRadius: "10%",
+        borderWidth: "2pt",
+        borderColor: "#666",
+        borderStyle: this.state.isDragActive ? "solid" : "dashed"
+      };
+   
+      var messageStyle = {
+        display: "table-cell",
+        width: size,
+        height: size,
+        textAlign: "center",
+        verticalAlign: "middle",
+        fontSize: "10pt",
+        textTransform: "uppercase",
+        color: "#666"
+      };
 
-    var messageStyle = {
-      display: "table-cell",
-      width: size,
-      height: size,
-      textAlign: "center",
-      verticalAlign: "middle",
-      fontSize: "10pt",
-      textTransform: "uppercase",
-      color: "#666"
-    };
-
     return (
-      <div ref="container" className="dropzone-container" style={dropzoneStyle} onDragLeave={this.dragLeaveHandler} onDragOver={this.dragOverHandler} onDrop={this.dropHandler}>
-        <span className="dropzone-message" style={messageStyle}>Drop Here</span>
+      <div className="dropzone" style={dropzoneStyle} onDragLeave={this.handleDragLeave} onDragOver={this.handleDragOver} onDrop={this.handleDrop}>
+        {this.props.children || <span style={messageStyle}>{this.props.message || "Drop Here"}</span>}
       </div>
     );
   }
+
 });
 
-module.exports = component;
+module.exports = Dropzone;

package.json

 {
   "name": "react-dropzone",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Simple HTML5 drag-drop zone in React",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,3 +13,3 @@ react-dropzone
 
-You may additionally pass in a CSS size for the dropzone using the `size` property.
+Optionally pass in a CSS size for the dropzone using the `size` property and a message to be shown inside the dropzone using the `message` property.
 
@@ -32,3 +32,3 @@ ```jsx
       <div>
-        <Dropzone handler={this.fileHandler} />
+        <Dropzone handler={this.fileHandler} size=200 message="Drag and drop a file here"/>
       </div>
@@ -40,2 +40,32 @@ );
 
+If you'd like more customizability, you can specify children for the component and all the default styling will be overridden.
+
+```jsx
+
+var Dropzone = require('react-dropzone');
+
+var component = React.createClass({
+
+  fileHandler: function(file) {
+      this.setState({
+        uploading: true
+      });
+      uploadScript(file, uploadURL, function(err, res) {
+        if (res.code == 200) {console.log("Upload success.")}
+      });
+    }
+  },
+
+  render: function() {
+    return (
+      <div>
+        <Dropzone handler={this.fileHandler}>
+          <span>{this.state.uploading ? "Uploading... " : "Drop an image here."}</span>
+        </Dropzone>
+      </div>
+    );
+  }
+});
+```
+
 Author
@@ -49,2 +79,2 @@ ======
 
-MIT
+MIT

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

15923

increased by6.07%

Lines of code

61

increased by1.67%

Number of lines in readme file

77

increased by67.39%

Worsened metrics

Published versions last week

0

decreased by-100%

No dependency changes