Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@muriukialex/react-modal-popup
Advanced tools
Readme
@muriukialex/react-modal-popup
is a React package that allows you to easily create customizable modal pop-ups for your React applications. With this package, you can display content in modal dialogs with optional custom styling and an auto-close feature.
To install @muriukialex/react-modal-popup
, you can use npm or yarn:
npm install @muriukialex/react-modal-popup
# or
yarn add @muriukialex/react-modal-popup
Here's how you can use the Modal
component in your React application:
import Modal from '@muriukialex/react-modal-popup'
const YourComponent = () => {
const handleCloseModal = () => {
// Handle modal close action
}
return (
<Modal
onClose={handleCloseModal}
customContainerStyles={/* Your custom styles */}
customContentStyles={/* Your custom styles */}
customModalButtonStyles={/* Your custom styles */}
>
{/* Your content goes here */}
</Modal>
)
}
The Modal
component accepts the following props:
onClose
: A callback function to handle the modal close action.children
: The content you want to display within the modal. (optional)customContainerStyles
: Custom styles for the modal container. (optional)customContentStyles
: Custom styles for the modal content. (optional)customModalButtonStyles
: Custom styles for the modal's close button. (optional)delay
: The time (in milliseconds) after which the modal automatically closes(default: 10000ms). (optional)import Modal from '@muriukialex/react-modal-popup'
const App = () => {
const [showModal, setShowModal] = useState(false);
const handleCloseModal = () => {
setShowModal(false);
};
const handleShowModal = () => {
setShowModal(true);
};
return (
<div className="App">
<h1>React Pop up Modal Example</h1>
<button onClick={handleShowModal}>Show Modal</button>
{showModal ? <Modal onClose={handleCloseModal}>Some message</Modal> : null}
</div>
)
}
This package is open-source and available under the ISC License.
If you encounter any issues or have suggestions for improvement, please submit an issue on GitHub.
Contributions are welcome! Feel free to submit a pull request.
FAQs
A package to create modal pop ups for a React application
The npm package @muriukialex/react-modal-popup receives a total of 37 weekly downloads. As such, @muriukialex/react-modal-popup popularity was classified as not popular.
We found that @muriukialex/react-modal-popup demonstrated a healthy version release cadence and project activity because the last version was released less than 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.