![Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack](https://cdn.sanity.io/images/cgdhsj6q/production/6af25114feaaac7179b18127c83327568ff592d1-1024x1024.webp?w=800&fit=max&auto=format)
Security News
Namecheap Takes Down Polyfill.io Service Following Supply Chain Attack
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
react-hook-popup
Advanced tools
Readme
React Hook Popup is a lightweight Javascript and Typescript library to easily manage popups in React with a single hook. Display alerts, modals, snackbars, and more from anywhere in your React application without needing to manage your own open/closed state or crowd your components' JSX with popups.
npm install react-hook-popup
React Hook Popup is completely centered around one single, simple to use hook: usePopup
. It can be imported like
import { usePopup } from 'react-hook-popup';
Any component that uses this hook must appear below the <PopupProvider>
component in the tree. You probably want to wrap your whole application in this component.
import { PopupProvider } from 'react-hook-popup';
<PopupProvider>
<YourApplication />
</PopupProvider>
The usePopup
hook takes two arguments:
string
key that is unique to each popup.The hook returns a function to show that popup, and a function to it.
const [showPopup, hidePopup] = usePopup('alert', () => (
<div className="alert">
This is an alert!
</div>
));
<button onClick={showPopup}>Show Alert</button>
In the above example, clicking the button to call showPopup
will display the alert. That's it! However, React Hook Popup provides functionality for more advanced and dynamic popups which you can read about below.
In a style similar to the render props pattern, the function that renders the popup provides access to a few utility values and functions that can be used within the popup to make it more dynamic. These include
message
: Used to display a dynamic content inside of the popup. This content is set via an argument to the showPopup
function, as shown below.handleClose
: A function to close the popup from within its own JSX.const [showPopup, hidePopup] = usePopup('popup', ({ message, handleClose }) => (
<div className="modal">
{message}
<button onClick={handleClose}>
Close this modal
</button>
</div>
));
<button onClick={() => showPopup('I am a modal!')}>
Show the modal
</button>
FAQs
Easily manage popups like alerts and modals in React with a single hook
The npm package react-hook-popup receives a total of 45 weekly downloads. As such, react-hook-popup popularity was classified as not popular.
We found that react-hook-popup demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.