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.
react-zoom-pan
Advanced tools
Readme
A react component that enables you to add pan,zoom,resize and rotation functionality to your application
With React-zoom-pan is a container component that has g zoom and pan functionality as well as adding resize,move,and rotatation capabilities to any child element .
The component is capable of:
To watch a demo take a look at video that shows how to use the component.
To play with a live demo .
Support us with a monthly donation and help us continue our activities. [Become a backer]
npm install react-zoom-pan
Using this component is really easy, Import the ZoomPan component,add the ZoomPan to your render method and add whatever other component inside the ZoomPan container. And that's all. Now all the components inside the container can be move,resize and rotate, you also can use your mouse wheel to zoom and pan.
import React, { Component } from 'react';
import ZoomPan from 'react-zoom-pan';
import './App.css';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="app-container">
<div className="flow-container">
<ZoomPan>
<div x={800} y={50} w={200} h={50}>
container 1
</div>
<div x={100} y={250} w={200} h={50}>
container 2
</div>
</ZoomPan>
</div>
</div>
);
}
}
Here is the demo code:
To set the dimensions like (x,y) positions or (width,height) on the children documents you can set the following properties:
name | Descriptions |
---|---|
y | The y coordinate of the top point of the element |
w | The width of the element |
h | The height of the element |
Property | params | Descriptions |
---|---|---|
onSelectItem | string | set the zoom level.The possible values are:"month","week","day" |
onChange | string | set the zoom level.The possible values are:"month","week","day" |
onAddItem | string | set the zoom level.The possible values are:"month","week","day" |
FAQs
A component to add zoom pan,move,resize and rotate elements for react apps
The npm package react-zoom-pan receives a total of 18 weekly downloads. As such, react-zoom-pan popularity was classified as not popular.
We found that react-zoom-pan 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.