Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-portal
Advanced tools
react-portal - npm Package Compare versions
Comparing version 1.5.0 to 1.5.5
| { | ||
| "name": "react-portal", | ||
| "main": "portal.js", | ||
| "description": "Simple React component for transportation of your modals, lightboxes, etc. to document.body", | ||
| "author": "Vojtech Miksu <vojtech@miksu.cz>", | ||
| "version": "1.5.0", | ||
| "license": "MIT", | ||
| "version": "1.5.5", | ||
| "description": "React component for transportation of modals, lightboxes, loading bars... to document.body", | ||
| "main": "build/portal", | ||
| "files": [ | ||
| "*.md", | ||
| "LICENSE", | ||
| "lib", | ||
| "build" | ||
| ], | ||
| "repository": { | ||
@@ -12,6 +16,17 @@ "type": "git", | ||
| }, | ||
| "author": "Vojtech Miksu <vojtech@miksu.cz>", | ||
| "license": "MIT", | ||
| "scripts": { | ||
| "build": "gulp build", | ||
| "dev": "gulp" | ||
| "start": "node devServer.js", | ||
| "build": "mkdir -p build && babel ./lib/portal.js --out-file ./build/portal.js", | ||
| "build:examples": "npm run clean && npm run build:examples:webpack", | ||
| "build:examples:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.prod.js", | ||
| "clean": "rimraf build", | ||
| "test": "cross-env NODE_ENV=test mocha --compilers js:babel-register", | ||
| "lint": "eslint examples lib test devServer.js", | ||
| "prepublish": "cross-env NODE_ENV=production npm run build" | ||
| }, | ||
| "tags": [ | ||
| "react" | ||
| ], | ||
| "keywords": [ | ||
@@ -31,15 +46,25 @@ "react", | ||
| "devDependencies": { | ||
| "babel-eslint": "^4.1.3", | ||
| "babelify": "^6.3.0", | ||
| "browserify": "^11.2.0", | ||
| "eslint-plugin-react": "^3.5.1", | ||
| "gulp": "^3.9.0", | ||
| "gulp-babel": "^5.2.1", | ||
| "gulp-connect": "^2.2.0", | ||
| "gulp-eslint": "^1.0.0", | ||
| "gulp-livereload": "^3.8.1", | ||
| "babel-cli": "^6.4.0", | ||
| "babel-core": "^6.4.0", | ||
| "babel-eslint": "^4.1.6", | ||
| "babel-loader": "^6.2.1", | ||
| "babel-preset-es2015": "^6.3.13", | ||
| "babel-preset-react": "^6.3.13", | ||
| "babel-preset-react-hmre": "^1.0.1", | ||
| "babel-register": "^6.3.13", | ||
| "cross-env": "^1.0.7", | ||
| "enzyme": "^1.2.0", | ||
| "eslint": "^1.10.3", | ||
| "eslint-plugin-react": "^3.14.0", | ||
| "express": "^4.13.3", | ||
| "jsdom": "^7.2.2", | ||
| "mocha": "^2.3.4", | ||
| "react-addons-test-utils": "^0.14.6", | ||
| "rimraf": "^2.5.0", | ||
| "sinon": "^1.17.2", | ||
| "tween.js": "^16.3.1", | ||
| "vinyl-source-stream": "^1.1.0", | ||
| "watchify": "^3.4.0" | ||
| "webpack": "^1.12.11", | ||
| "webpack-dev-middleware": "^1.4.0", | ||
| "webpack-hot-middleware": "^2.6.0" | ||
| } | ||
| } |
@@ -8,3 +8,3 @@ React-portal | ||
| > Struggling with modals, lightboxes or loading bars in React? Look no further. React-portal creates a new top-level React tree and injects its child into it. | ||
| > Struggling with modals, lightboxes or loading bars in React? React-portal creates a new top-level React tree and injects its child into it. That's necessary for proper styling (especially positioning). | ||
@@ -20,2 +20,4 @@ ## Features | ||
| - supports absolute positioned components (great for tooltips) | ||
| - no dependencies | ||
| - **fully covered by tests** | ||
@@ -28,10 +30,9 @@ ## Demo | ||
| git clone https://github.com/tajo/react-portal | ||
| cd react-portal | ||
| npm install | ||
| npm install react react-dom | ||
| npm run build:examples | ||
| open examples/index.html | ||
| ``` | ||
| and open | ||
| ``` | ||
| /examples/index.html | ||
| ``` | ||
| ## Installation | ||
@@ -83,32 +84,37 @@ | ||
| #### children : ReactElement (required) | ||
| ### Always required | ||
| #### children : ReactElement | ||
| The portal expects one child (`<Portal><Child ... /></Portal>`) that will be ported. | ||
| #### isOpened : bool (optional) | ||
| ### One of these two required | ||
| #### isOpened : bool | ||
| If true, the portal is open. If false, the portal is closed. It's up to you to take care of the closing (aka taking care of the state). Don't use this prop if you want to make your life easier. Use openByClickOn instead! | ||
| #### openByClickOn : ReactElement (optional) | ||
| #### openByClickOn : ReactElement | ||
| The second way how to open the portal. This element will be rendered by the portal immediately | ||
| with `onClick` handler that triggers portal opening. **How to close the portal then?** The portal provides its ported child with a callback `this.props.closePortal`. Or you can use built-in portal closing methods (closeOnEsc, ... more below). Notice that you don't have to deal with the open/close state (like when using the `isOpened` prop). | ||
| #### closeOnEsc: bool (optional) | ||
| ### Optional | ||
| #### closeOnEsc: bool | ||
| If true, the portal can be closed by the key ESC. | ||
| #### closeOnOutsideClick: bool (optional) | ||
| #### closeOnOutsideClick: bool | ||
| If true, the portal can be closed by the outside mouse click. | ||
| #### onOpen: func(DOMNode) (optional) | ||
| #### onOpen: func(DOMNode) | ||
| This callback is called when the portal is opened and rendered (useful for animating the DOMNode). | ||
| #### beforeClose: func(DOMNode, removeFromDOM) (optional) | ||
| #### beforeClose: func(DOMNode, removeFromDOM) | ||
| This callback is called when the closing event is triggered but it prevents normal removal from the DOM. So, you can do some DOMNode animation first and then call removeFromDOM() that removes the portal from DOM. | ||
| #### onClose: func (optional) | ||
| #### onClose: func | ||
| This callback is called when the portal closes and after beforeClose. | ||
| #### onUpdate: func (optional) | ||
| #### onUpdate: func | ||
| This callback is called when the portal is (re)rendered. | ||
| ## Tips & Tricks | ||
@@ -166,9 +172,13 @@ - Does your modal have a fullscreen overlay and the `closeOnOutsideClick` doesn't work? [There is a simple solution](https://github.com/tajo/react-portal/issues/2#issuecomment-92058826). | ||
| npm install react react-dom | ||
| gulp | ||
| npm start | ||
| open http://localhost:3000 | ||
| ``` | ||
| - Copy&paste the address from terminal to your browser. (something like `http://localhost:8080`) | ||
| - Don't commit the main build `portal.js` (aka don't run `npm run build`) | ||
| - **Run `gulp eslint` before every commit** to preserve the coding style. Do you know there is a [nice real-time checking integration for your editor](http://eslint.org/docs/user-guide/integrations)? | ||
| **Don't forget to run this before every commit:** | ||
| ``` | ||
| npm run lint | ||
| npm test | ||
| ``` | ||
| ## Credits | ||
@@ -175,0 +185,0 @@ |
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Number of lines in readme file
- increased by5.75%
184
Worsened metrics
- Total package byte prevSize
- decreased by-11.2%
1658192
- Dev dependency count
- increased by83.33%
22
- Number of package files
- decreased by-60%
6
- Lines of code
- decreased by-98.58%
328
- Number of medium supply chain risk alerts
- increased byInfinity%
1
No dependency changes