react-tooltip - npm Package Compare versions

Comparing version 0.0.1 to 0.1.0

example/index.js

 'use strict';
 
 var React = require("react");
-var ReactTooltip = require("../");
+var ReactTooltip = require("../index");
 
@@ -11,4 +11,4 @@ var Index = React.createClass({
         <p data-placeholder="foo">hover on me</p>
-        <p data-placeholder="This is another hover test" data-place="bottom">hover on me</p>
-        <ReactTooltip place="top"/>
+        <p data-placeholder="This is another hover test" data-place="bottom">Tooltip from bottom</p>
+        <ReactTooltip />
       </section>
@@ -15,0 +15,0 @@ )

index.js

@@ -5,3 +5,10 @@ 'use strict';
 var classNames = require("classnames");
+var basicClass = require("./src/basic");
+var basicShowClass = require("./src/basic-show");
+var topPlaceClass = require("./src/place-top");
+var bottomPlaceClass = require("./src/place-bottom");
+var RCSS = require("rcss");
 
+RCSS.injectAll();
+
 var ReactTooltip = React.createClass({
@@ -69,8 +76,15 @@ getInitialState: function() {
     }
-    var toolTipClass = classNames({
-      "react-tooltip": true,
-      "show": this.state.show,
-      "place-top": this.state.place === "top",
-      "place-bottom": this.state.place === "bottom"
-    })
+    var classNamesObject = {};
+    classNamesObject[basicClass.className] = true ;
+    if(this.state.show) {
+      classNamesObject[basicShowClass.className] = true ;
+    }
+    if(this.state.place === "top") {
+      classNamesObject[topPlaceClass.className] = true
+    }
+    if(this.state.place === "bottom") {
+      classNamesObject[bottomPlaceClass.className] = true;
+    }
+    var toolTipClass = classNames(classNamesObject)
+
     return (
@@ -77,0 +91,0 @@ <span className={toolTipClass} style={style} data-id="tooltip">{this.state.placeholder}</span>

package.json

 {
   "name": "react-tooltip",
-  "version": "0.0.1",
+  "version": "0.1.0",
   "description": "react tooltip component",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack",
+    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --cotent-base build"
   },
@@ -30,2 +31,3 @@ "repository": {
     "classnames": "^1.2.0",
+    "rcss": "^0.1.5",
     "react": "^0.13.1"
@@ -35,2 +37,3 @@ },
     "browserify": "^9.0.7",
+    "css-loader": "^0.10.1",
     "gulp": "^3.8.11",
@@ -41,3 +44,5 @@ "gulp-rename": "^1.2.2",
     "gulp-util": "^3.0.4",
+    "jsx-loader": "^0.13.1",
     "reactify": "^1.1.0",
+    "style-loader": "^0.10.1",
     "vinyl-buffer": "^1.0.0",
@@ -44,0 +49,0 @@ "vinyl-source-stream": "^1.1.0",

README.md

 # react-tooltip
-react tooltip component
+
+React tooltip component, inspired by tooltipsy (a jquery plugin I've used)
+
+[![Version](http://img.shields.io/npm/v/react-tooltip.svg)](https://www.npmjs.org/package/react-tooltip)
+
+
+### Installation
+
+```
+npm install react-tooltip --save
+```
+
+### Usage
+
+1 . Require react-tooltip after installation
+
+```
+var ReactTooltip = require("react-tooltip")
+```
+
+
+2 . Add data-placeholder = "your placeholder" to your element
+
+	<p data-placeholder="hello world">Tooltip</p>
+
+3 . Including react-tooltip component
+
+
+```
+<ReactTooltip />
+```
+
+
+### Example
+```
+'use strict';
+
+var React = require("react");
+var ReactTooltip = require("../index");
+
+var Index = React.createClass({
+  render: function() {
+    return (
+      <section className="tooltip-example">
+        <p data-placeholder="foo">hover on me</p>
+        <p data-placeholder="This is another hover test" data-place="bottom">Tooltip from bottom</p>
+        <ReactTooltip />
+      </section>
+    )
+  }
+});
+
+React.render(<Index />,document.body)
+```
+
+### License
+
+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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

No tests

Quality

Package does not have any tests. This is a strong signal of a poorly maintained or low quality package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1434629

increased by12.04%

Number of package files

18

increased by20%

Lines of code

20202

increased by13.43%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

60

increased by1900%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

13

increased by30%

Number of medium supply chain risk alerts

2

increased byInfinity%

Dependency changes

• + Addedrcss@^0.1.5

• + Addedcharenc@0.0.2(transitive)

• + Addedcrypt@0.0.2(transitive)

• + Addeddeep-extend@0.2.11(transitive)

• + Addedescape-html@1.0.3(transitive)

• + Addedrcss@0.1.5(transitive)

• + Addedsha1@1.1.1(transitive)

• + Addedvalid-css-props@0.0.5(transitive)

• + Addedvalid-media-queries@0.0.3(transitive)