├── .gitignore ├── .npmignore ├── Gruntfile.js ├── LICENSE ├── README.md ├── index.js ├── package.json ├── pom.xml └── test └── .gitignore /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | 5 | # Runtime data 6 | pids 7 | *.pid 8 | *.seed 9 | 10 | # Directory for instrumented libs generated by jscoverage/JSCover 11 | lib-cov 12 | 13 | # Coverage directory used by tools like istanbul 14 | coverage 15 | 16 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 17 | .grunt 18 | 19 | # node-waf configuration 20 | .lock-wscript 21 | 22 | # Compiled binary addons (http://nodejs.org/api/addons.html) 23 | build/Release 24 | 25 | # Dependency directory 26 | # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git 27 | node_modules 28 | 29 | # Target directory 30 | dist 31 | 32 | .npmrc -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/wix-incubator/react-hoverbox/c43a6f26484f735c972f5b44253660048d6649c7/.npmignore -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | var path = require('path'); 2 | 3 | module.exports = function(grunt) { 4 | 5 | grunt.initConfig({ 6 | webpack: { 7 | all:{ 8 | devtool: 'source-map', 9 | entry: './index', 10 | output: { 11 | path:"dist/", 12 | filename:"index.js", 13 | libraryTarget: "commonjs2" 14 | }, 15 | resolve: { 16 | extensions: ['', '.js', '.jsx'] 17 | }, 18 | module: { 19 | loaders: [ 20 | { 21 | test: /\.json$/, 22 | loaders: ['json-loader'] 23 | }, 24 | { 25 | test: /\.js$/, 26 | loaders: ['babel?blacklist[]=strict&compact=false'] 27 | }, 28 | { 29 | test: /\.(png|jpg)$/, 30 | loaders: ['url-loader?limit=8192'] 31 | }, 32 | { 33 | test: /\.css$/, 34 | loader: "style-loader!css-loader!less-loader?strictMath!"+__dirname+"/webpack-loaders/css-dir-loader.js!less-loader" 35 | } 36 | ] 37 | }, 38 | externals:["react", "react-dom", "lodash", "jquery", "moment", "moment-timezone"] 39 | } 40 | } 41 | }); 42 | 43 | grunt.loadNpmTasks('grunt-webpack'); 44 | 45 | grunt.registerTask('default', ['webpack']); 46 | } 47 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Wix.com 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # react-hoverbox 2 | 3 | HoverBox is a React component that allows your own component's render method to behave differently if certain parts of it are being hovered on. 4 | This can be useful when you need your component to respond to hover in ways that can't be done completely by CSS. 5 | 6 | HoverBox accepts one prop: a render function, similar to the one you'd give any React component. However, this function has a parameter which is set to true when the component is currently being hovered on. 7 | 8 | ## Example 9 | 10 | __ES6__ 11 | 12 | var HoverBox = require("react-hoverbox"); 13 | 14 | ( 15 |
16 | 17 |
Look at the shiny hover effect!
18 |
19 | )}/> 20 | 21 | __ES5__ 22 | 23 | var HoverBox = require("react-hoverbox"); 24 | 25 | 28 | 29 |
Look at the shiny hover effect!
30 | 31 | ); 32 | }}/> 33 | 34 | ## Installation 35 | 36 | npm install react-hoverbox 37 | 38 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var React = require('react'); 2 | var ReactDOM = require('react-dom'); 3 | var _ = require('lodash'); 4 | var $ = require('jquery'); 5 | var createReactClass = require('create-react-class'); 6 | var PropTypes = require('prop-types'); 7 | 8 | module.exports = createReactClass({ 9 | propTypes: { 10 | render: PropTypes.func, 11 | }, 12 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 13 | 14 | getInitialState: function() { 15 | return { 16 | hover: false, 17 | }; 18 | }, 19 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 20 | 21 | shouldComponentUpdate(nextProps, nextState, nextContext) { 22 | return !_.isEqual(nextProps, this.props) || !_.isEqual(nextState, this.state) || !_.isEqual(nextContext, this.context); 23 | }, 24 | 25 | isHovered: function(element) { 26 | try { 27 | return element && $(element).is(':hover'); 28 | } catch (err) { 29 | console.error(err); 30 | } 31 | }, 32 | 33 | componentDidMount: function() { 34 | this.isMounted = true; 35 | 36 | var This = this; 37 | 38 | setTimeout(function() { 39 | if (This.isMounted) { 40 | var element = ReactDOM.findDOMNode(This); 41 | This.setState({ hover: !!(This.isHovered(element)) }); 42 | } 43 | }, 1); 44 | }, 45 | 46 | componentWillUnmount: function() { 47 | this.isMounted = false; 48 | }, 49 | 50 | componentDidUpdate: function(prevProps, prevState, prevContext) { 51 | var This = this; 52 | setTimeout(function() { 53 | if (This.isMounted) { 54 | var element = ReactDOM.findDOMNode(This); 55 | This.setState({ hover: !!(This.isHovered(element)) }); 56 | } 57 | }, 1); 58 | }, 59 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 60 | 61 | displayName: 'HoverBox', 62 | 63 | render: function() { 64 | return ( 65 |
66 | {this.props.render(this.state.hover)} 67 |
68 | ); 69 | }, 70 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 71 | 72 | onMouseEnter: function() { 73 | if (this.state.hover == false) { 74 | this.setState({hover: true}); 75 | } 76 | }, 77 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 78 | 79 | onMouseOver: function() { 80 | if (this.state.hover == false) { 81 | this.setState({hover: true}); 82 | } 83 | }, 84 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 85 | 86 | onMouseLeave: function() { 87 | if (this.state.hover == true) { 88 | this.setState({hover: false}); 89 | } 90 | }, 91 | // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 92 | }); 93 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hoverbox", 3 | "version": "1.0.0", 4 | "description": "ReactJS Component that knows when it's hovered over", 5 | "main": "dist/index.js", 6 | "scripts": { 7 | "test": "mocha --compilers js:babel/register", 8 | "prepublish": "npm test && grunt", 9 | "build": ":", 10 | "release": "npm install wnpm-ci && wnpm-release -- --no-shrinkwrap" 11 | }, 12 | "repository": { 13 | "type": "git", 14 | "url": "https://github.com/wix/react-hoverbox.git" 15 | }, 16 | "keywords": [ 17 | "react", 18 | "reactjs", 19 | "hover", 20 | "mouseover", 21 | "wix" 22 | ], 23 | "author": "Wix Restaurants", 24 | "license": "MIT", 25 | "bugs": { 26 | "url": "https://github.com/wix/react-hoverbox/issues" 27 | }, 28 | "homepage": "https://github.com/wix/react-hoverbox", 29 | "dependencies": { 30 | "create-react-class": "^15.6.3", 31 | "prop-types": "^15.6.2" 32 | }, 33 | "devDependencies": { 34 | "babel": "^5.8.21", 35 | "babel-core": "^5.8.22", 36 | "babel-loader": "^5.3.2", 37 | "chai": "^2.2.0", 38 | "grunt": "^0.4.5", 39 | "grunt-webpack": "^1.0.11", 40 | "grunt-cli": "^0.1.13", 41 | "mocha": "^2.2.1", 42 | "webpack": "^1.12.0", 43 | "webpack-dev-server": "^1.10.1" 44 | }, 45 | "publishConfig": { 46 | "registry": "https://registry.npmjs.org/" 47 | }, 48 | "directories": { 49 | "test": "test" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /pom.xml: -------------------------------------------------------------------------------- 1 | 2 | 5 | 6 | com.wixpress.restaurants 7 | react-hoverbox 8 | React Hoverbox 9 | React Hoverbox 10 | 11 | 12 | com.wixpress.common 13 | wix-master-parent 14 | 100.0.0-SNAPSHOT 15 | 16 | 17 | 18 | 4.0.0 19 | 1.0.0-SNAPSHOT 20 | pom 21 | 22 | 23 | 24 | Danny Leshem 25 | dannyl@wix.com 26 | 27 | owner 28 | 29 | 30 | 31 | Yoav Amit 32 | yoava@wix.com 33 | 34 | owner 35 | 36 | 37 | 38 | Tal Mardix 39 | talma@wix.com 40 | 41 | owner 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /test/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore --------------------------------------------------------------------------------