Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-portal

Package Overview
Dependencies
Maintainers
1
Versions
51
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-portal - npm Package Compare versions

Comparing version 4.0.0-beta.3 to 4.0.0-rc.0

READMEv3.MD

13

package.json
{
"name": "react-portal",
"version": "4.0.0-beta.3",
"version": "4.0.0-rc.0",
"description": "To make your life with React Portals easier.",

@@ -30,3 +30,3 @@ "main": "lib/index.js",

"format": "prettier --write \"**/*.js\"",
"test": "cross-env BABEL_ENV=commonjs jest"
"test": "cross-env BABEL_ENV=commonjs jest --no-cache"
},

@@ -36,2 +36,7 @@ "tags": [

],
"jest": {
"setupFiles": [
"raf/polyfill"
]
},
"keywords": [

@@ -53,2 +58,3 @@ "react",

"babel-eslint": "^8.0.1",
"babel-jest": "^21.2.0",
"babel-loader": "^7.1.1",

@@ -59,2 +65,3 @@ "babel-preset-env": "^1.6.1",

"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"eslint": "^4.3.0",

@@ -64,4 +71,6 @@ "eslint-plugin-prettier": "^2.1.2",

"prettier": "^1.5.3",
"raf": "^3.4.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-test-renderer": "^16.0.0",
"rimraf": "^2.5.0",

@@ -68,0 +77,0 @@ "webpack": "^3.4.1"

16

README.md

@@ -9,3 +9,3 @@ React-portal

*This is documentation for React-portal v4+ (currently beta). It works only with React v16+. For v3, please check [this document](READMEv3.MD). The final API can change. The test suite needs to be rebuilt.*
*This is a documentation for React-portal v4+ (currently RC). It works only with React v16+. For v3, please check [this document](READMEv3.MD).*

@@ -52,4 +52,6 @@ ## Features

**This gives you absolute flexibility and control**. But what if you typically use React-portal just to open modals and you want to cut some boilerplate? In other words, **you are ok with giving up some flexibility for convenience**. Let React-portal handle its own state!
**This gives you absolute flexibility and control** and I would recommend you to use it a basic building block for your components as modals or notifications. **This code also works with server-side rendering**. If you think about just using official `ReactDOM.createPortal()`, you would have to check for existence of DOM environment.
React-portal used to come packed with some extra goodies because sometimes **you are ok with giving up some flexibility for convenience**. For that case, V4 introduces another component that handles its own state for you:
### PortalWithState

@@ -62,7 +64,5 @@

{({ openPortal, closePortal, isOpen, portal }) => [
!isOpen && (
<button key="foo" onClick={openPortal}>
Open Portal
</button>
),
<button key="foo" onClick={openPortal}>
Open Portal
</button>,
portal(

@@ -99,2 +99,4 @@ <p>

If you start running into limits of `<PortalWithState />` (complex animations), you probably want to use `<Portal />` instead and build a component tailored to your specific taste.
## Run Examples

@@ -101,0 +103,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc