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.
pop-modal
Advanced tools
Readme
A simple adaptive React Popup Modal. Also works fine with server side rendering of React.
using npm
npm install pop-modal ---save
Pop-Modal is a wrapper for React Components. It passes as props 2 methods for opening and closing modal: 'openPopup' and 'closePopup' and the 'Modal' itself.
const { openPopup, closePopup, Modal } = this.props
to render something inside the modal just wrapp it inside Modal prop of Component.
render () {
const { Modal } = this.props
return (
<Modal>
<h1>Hello from Pop Modal</h1>
</Modal>
)
}
To add Modal to a React Component you must pass the Component that will receive modal's props.
import WithModal from 'pop-modal'
export default WithModal( YourComponent )
To configure Modal's behaviour you can pass props to it.
Below is a table of props it accepts.
PropName | Type | Description | Default | Required |
---|---|---|---|---|
onClose | function | An callback function that will be called once the modal has been closed. | Null | false |
onOpen | function | An callback function that will be called once the modal has been opened. | Null | false |
openMs | number | Timeout in ms for modal opening. | 1000 | false |
closeMs | number | Timeout in ms for modal closing. | 500 | false |
showBtn | boolean | Display close button or no. | true | false |
btnClassName | string | Close button's className. | 'fa fa-close' | false |
outsideClickClose | boolean | Option to close modal if there is an click outside of it's container. | false | false |
defaultOpen | boolean | Used to render modal in open stage, skipping opening stage. It can be used for Server Side Rendering when you need the modal to be open from the start. | false | false |
Example:
const { Modal } = this.props
...
return (
<Modal onClose={ () => { console.log('closed') } } openMs={ 1000 } closeMs={ 1000 }>
<h1>Hello</h1>
</Modal>
)
The react component that is wrapped in pop-modal
gets two props for closing and opening: openPopup
and closePopup
, openPopup can take an initial stage to be opened in.
Example:
this.props.openPopup() // Opens the popup
You can find the css required by the modal in the 'pop-modal/dist/modal.css' file in your node_modules. It's very likely that you will need to do some adjustments to this css file so it's better to just copy it from here and edit it the way you need it.
The modal itself has four transition classes: closed > opening > open > closing. So you can customize the transition of the modal.
import 'pop-modal/dist/modal.css'
using decorators
import React, { Component } from 'react'
import WithModal from 'pop-modal'
@WithModal
export default class Page extends Component {
render () {
const { openPopup, Modal } = this.props
return (
<div className='container text-center'>
<h1>Pop Modal Demo</h1>
<button className='btn btn-primary' type='button' onClick={
() => { openPopup() }
}>Open modal</button>
<Modal outsideClickClose>
<h1>Hello from Pop Modal</h1>
</Modal>
</div>
)
}
}
using ES6
import React, { Component } from 'react'
import WithModal from 'pop-modal'
class Page extends Component {
render () {
const { openPopup, Modal } = this.props
return (
<div className='container text-center'>
<h1>Pop Modal Demo</h1>
<button className='btn btn-primary' type='button' onClick={
() => { openPopup() }
}>Open modal</button>
<Modal outsideClickClose>
<h1>Hello from Pop Modal</h1>
</Modal>
</div>
)
}
}
export default WithModal( Page )
FAQs
A simple react popup modal
The npm package pop-modal receives a total of 28 weekly downloads. As such, pop-modal popularity was classified as not popular.
We found that pop-modal 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
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.