New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

react-cool-portal

Package Overview
Dependencies
Maintainers
1
Versions
57
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-cool-portal - npm Package Compare versions

Comparing version 1.0.15 to 1.0.16

2

package.json
{
"name": "react-cool-portal",
"version": "1.0.15",
"version": "1.0.16",
"description": "React hook for Portals, which renders modals, dropdowns, tooltips etc. to <body> or else.",

@@ -5,0 +5,0 @@ "license": "MIT",

@@ -266,2 +266,28 @@ # React Cool Portal

One problem of the above example is that CSS transition/animation will be cut off due to the re-creating of the `Portal` component. So if you want to apply transitions or animations to the wrapped element of the customized hook. The `isShow` need to be passed from the props as below.
```js
const useModal = (options = {}) => {
const { Portal, ...rest } = usePortal({
...options,
defaultShow: false,
internalShowHide: false,
});
const Modal = useCallback(
// Pass the "isShow" from props to prevent CSS transition/animation to be cut off
({ isShow, children }) => (
<Portal>
<div className={`modal${isShow ? " modal-open" : ""}`} tabIndex={-1}>
{children}
</div>
</Portal>
),
[]
);
return { Modal, ...rest };
};
```
## API

@@ -268,0 +294,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