
Security News
vlt Launches "reproduce": A New Tool Challenging the Limits of Package Provenance
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
@trendmicro/react-modal
Advanced tools
React Modal
Demo: https://trendmicro-frontend.github.io/react-modal
npm install --save react @trendmicro/react-modal
@trendmicro/react-modal
and its styles in your application as follows:import Modal from '@trendmicro/react-modal';
// Be sure to include styles at some point, probably during your bootstraping
import '@trendmicro/react-modal/dist/react-modal.css';
Create a common components directory including both Buttons
and Modal
components, as shown below:
components/
Buttons/
index.js
Modal/
index.js
components/Buttons/index.js
import '@trendmicro/react-buttons/dist/react-buttons.css';
export { Button, ButtonGroup, ButtonToolbar } from '@trendmicro/react-buttons';
components/Modal/index.js
import '@trendmicro/react-modal/dist/react-modal.css';
import Modal from '@trendmicro/react-modal';
export default Modal;
Then, import Modal
component in your code:
import Modal from './components/Modal';
import React from 'react';
import { Button } from './components/Buttons';
import Modal from './components/Modal';
export default ({ size = 'sm', closeModal, ...props }) => (
<Modal {...props} size={size} onClose={closeModal}>
<Modal.Header>
<Modal.Title>
Modal Title
</Modal.Title>
</Modal.Header>
<Modal.Body padding>
Modal Body
</Modal.Body>
<Modal.Footer>
<Button
btnStyle="primary"
onClick={closeModal}
>
Save
</Button>
<Button
btnStyle="default"
onClick={closeModal}
>
Close
</Button>
</Modal.Footer>
</Modal>
);
You can create a ModalWrapper component that changes the body style on open and close.
import React, { PureComponent } from 'react';
import Modal from './components/Modal';
let bodyStyle = null;
class ModalWrapper extends PureComponent {
static propTypes = {
...Modal.propTypes
};
static defaultProps = {
...Modal.defaultProps
};
componentWillReceiveProps(nextProps) {
if (nextProps.show !== this.props.show) {
if (nextProps.show) {
this.changeBodyStyle();
} else {
this.restoreBodyStyle();
}
}
}
componentDidMount() {
this.changeBodyStyle();
}
componentWillUnmount() {
this.restoreBodyStyle();
}
changeBodyStyle() {
if (bodyStyle) {
return;
}
// Prevent body from scrolling when a modal is opened
const body = document.querySelector('body');
bodyStyle = {
overflowY: body.style.overflowY
};
body.style.overflowY = 'hidden';
}
restoreBodyStyle() {
if (bodyStyle) {
const body = document.querySelector('body');
body.style.overflowY = bodyStyle.overflowY;
bodyStyle = null;
}
}
render() {
const { onClose, ...props } = this.props;
return (
<Modal
{...props}
onClose={() => {
this.restoreBodyStyle();
onClose();
}}
/>
);
}
}
ModalWrapper.Overlay = Modal.Overlay;
ModalWrapper.Content = Modal.Content;
ModalWrapper.Header = Modal.Header;
ModalWrapper.Title = Modal.Title;
ModalWrapper.Body = Modal.Body;
ModalWrapper.Footer = Modal.Footer;
export default ModalWrapper;
Name | Type | Default | Description |
---|---|---|---|
onClose | Function | A callback fired on clicking the overlay or the close button (x). | |
show | Boolean | true | Whether the modal is visible. |
showCloseButton | Boolean | true | Whether the close button (x) is visible. |
showOverlay | Boolean | true | Display an overlay in the background. Defaults to true . |
disableOverlayClick | Boolean | false | Don't close the modal on clicking the overlay. Defaults to false . |
overlayClassName | String | className to assign to modal overlay. | |
overlayStyle | Object | style to assign to modal overlay. | |
size | String | '' | One of: 'xs', 'sm', 'md', 'lg', 'extra-small', 'small', 'medium', 'large', or an empty string. Defaults to empty string that will automatically resize to fit contents. |
Size | Value | Dimension |
---|---|---|
Auto | '' | 400px (minimum width) |
Extra Small | 'xs', 'extra-small' | 400px (fixed width) x 240 px (minimum height) |
Small | 'sm', 'small' | 544px (fixed width) x 304 px (minimum height) |
Medium | 'md', 'medium' | 688px (fixed width) x 304 px (minimum height) |
Large | 'lg', 'large' | 928px (fixed width) x 304 px (minimum height) |
MIT
FAQs
React Modal component
The npm package @trendmicro/react-modal receives a total of 279 weekly downloads. As such, @trendmicro/react-modal popularity was classified as not popular.
We found that @trendmicro/react-modal demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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
vlt's new "reproduce" tool verifies npm packages against their source code, outperforming traditional provenance adoption in the JavaScript ecosystem.
Research
Security News
Socket researchers uncovered a malicious PyPI package exploiting Deezer’s API to enable coordinated music piracy through API abuse and C2 server control.
Research
The Socket Research Team discovered a malicious npm package, '@ton-wallet/create', stealing cryptocurrency wallet keys from developers and users in the TON ecosystem.