React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package for Zooming, Panning and Pinching html elements in easy way.<h2>Features</h2><ul><li>Fast and easy to use</li><li>Light, without external dependencies</li><li>Mobile gestures, touchpad gestures and desktop mouse events support</li><li>Powerful context usage, which gives you a lot of freedom</li><li>Highly customizable</li><li>Animations and many options</li></ul><a href="https://prc5.github.io/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank" style="color: rgb(255, 255, 250);">Demo</a><a href="https://github.com/prc5/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank">Github</a><h2>Install</h2><pre class="ql-syntax" spellcheck="false">npm install --save react-zoom-pan-pinch
</pre>OR<pre class="ql-syntax" spellcheck="false">yarn add react-zoom-pan-pinch
</pre><h2>Usage</h2><pre class="ql-syntax" spellcheck="false">import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
 render() {
 return (
 &lt;TransformWrapper&gt;&lt;TransformComponent&gt;&lt;img src="image.jpg" alt="test" /&gt;&lt;/TransformComponent&gt;&lt;/TransformWrapper&gt;
 );
 }
}
</pre>OR<pre class="ql-syntax" spellcheck="false">import React, { Component } from "react";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

class Example extends Component {
 render() {
 return (
 &lt;TransformWrapperdefaultScale={1}defaultPositionX={200}defaultPositionY={100}
 &gt;
 {({ zoomIn, zoomOut, resetTransform, ...rest }) =&gt; (
 &lt;React.Fragment&gt;&lt;div className="tools"&gt;&lt;button onClick={zoomIn}&gt;+&lt;/button&gt;&lt;button onClick={zoomOut}&gt;-&lt;/button&gt;&lt;button onClick={resetTransform}&gt;x&lt;/button&gt;&lt;/div&gt;&lt;TransformComponent&gt;&lt;img src="image.jpg" alt="test" /&gt;&lt;div&gt;Example text&lt;/div&gt;&lt;/TransformComponent&gt;&lt;/React.Fragment&gt;
 )}
 &lt;/TransformWrapper&gt;
 );
 }
}
</pre><h2>Props of TransformWrapper</h2>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean<h4>Options prop elements</h4>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean<h4>scalePadding prop elements</h4>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring<h4>Wheel prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean<h4>Pan prop elements</h4>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring<h4>Pinch prop elements</h4>PropsDefaultTypedisabledfalseboolean<h4>zoomIn prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>zoomOut prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>doubleClick prop elements</h4>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset<h4>reset prop elements</h4>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring<h4>Animations types</h4>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint<h4>Double click modes</h4>ValuezoomInzoomOutreset<h2>Values returned from TransformWrapper component</h2>ValueDescriptionTypesetScale(scale, animationTime, animationType)Sets scaleNumbersetPositionX(positionX, animationTime, animationType)Sets position xNumbersetPositionY(positionY, animationTime, animationType)Sets position yNumberzoomIn()Zooming in function, used for controls button---zoomOut()Zooming out function, used for controls button---setTransform(positionX, positionY, scale, animationTime, animationType)Sets transformations of contentNumber or nullresetTransform()Reset transformations to the initial valuesNumber<h2>License</h2>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a>That's it. Feel free to leave a comment.

React library to support easy Zoom, Pan, Pinch on various html dom elements like Images and Div's. It is a Super fast and light react npm package...

React library to implement Zoom, Pan, Pinch on HTML Elements - TCMHACK

React library to implement Zoom, Pan, Pinch on HTML Elements

Node.js&nbsp;is a platform built on Chrome&rsquo;s JavaScript runtime for easily building fast, scalable network applications. Latest version&nbsp;<a href="https://deb.nodesource.com/setup_12.x" target="_blank" rel="noreferrer noopener">node.js ppa</a>&nbsp;is maintaining by its official website. We can add this PPA to your&nbsp;Ubuntu 19.04, 18.04 LTS, 16.04 LTS (Trusty Tahr) and 14.04 LTS (Xenial Xerus)&nbsp;systems and install node.js on Linux VPS with easy commands.

To install specific nodejs version, Visit our tutorial&nbsp;<a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Install Specific Nodejs Version with NVM</a>.

<h2>Step 1 &ndash; Add Node.js PPA</h2>

Node.js package is available in LTS release and the current release. It&rsquo;s your choice to select which version you want to install on the system as per your requirements. Let&rsquo;s add the PPA to your system to install Nodejs on Ubuntu.

Use Current Release:&nbsp;At te last update of this tutorial, Node.js 12 is the current Node.js release available.

<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
</pre>

Use LTS Release :&nbsp;At the last update of this tutorial, Node.js 10.15.3 is the LTS release available.

<pre class="wp-block-preformatted">sudo apt-get install curl python-software-properties
curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
</pre>

For this tutorial,&nbsp;I am using the latest current release&nbsp;and added their PPA to my system.

<h2>Step 2 &ndash; Install Node.js on Ubuntu</h2>

You can successfully add Node.js PPA to Ubuntu system. Now execute the below command install Node on and Ubuntu using apt-get. This will also install NPM with node.js. This command also installs many other dependent packages on your system.

<pre class="wp-block-preformatted">sudo apt-get install nodejs
</pre>

<h2>Step 3 &ndash; Check Node.js and NPM Version</h2>

After installing node.js verify and check the installed version. You can find more details about current version on node.js&nbsp;<a href="https://nodejs.org/download/" target="_blank" rel="noreferrer noopener">official website</a>.

<pre class="wp-block-preformatted">node -v 

v12.1.0
</pre>

Also, check the npm version

<pre class="wp-block-preformatted">npm -v 

v12.3.1
</pre>

<h2>Step 4 &ndash; Create Demo Web Server (Optional)</h2>

This is an optional step. If you want to test your node.js install. Let&rsquo;s create a web server with &ldquo;Hello World!&rdquo; text. Create a file&nbsp;server.js

<pre class="wp-block-preformatted">vim server.js
</pre>

and add the following contentserver.js

<pre class="wp-block-preformatted">var http = require('http');
http.createServer(function (req, res) {
 res.writeHead(200, {'Content-Type': 'text/plain'});
 res.end('Hello World\n');
}).listen(3000, "127.0.0.1");
console.log('Server running at http://127.0.0.1:3000/');
</pre>

Now start the Node application using the command.

<pre class="wp-block-preformatted">node server.js

debugger listening on port 5858
Server running at http://127.0.0.1:3000/
</pre>

You can also start the application with debugging enabled with the following commands.

<pre class="wp-block-preformatted">node --inspect server.js

Debugger listening on ws://127.0.0.1:9229/8976a32b-cf99-457c-85fb-e7288cbadac6
For help see https://nodejs.org/en/docs/inspector
Server running at http://127.0.0.1:3000/
</pre>

The web server has been started on port 3000. Now access&nbsp;http://127.0.0.1:3000/&nbsp;URL in browser. Now you will need to configure a front-end server for your app.

<ul>
<li>Read:&nbsp;<a href="../../../../blog/how-to-setup-nginx-as-frontend-server-for-node-js/">How to Setup Nginx as Frontend Server for Node.js</a></li>
</ul>

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications.

How to Install Latest Node.js and NPM on Ubuntu with PPA - TCMHACK

How to Install Latest Node.js and NPM on Ubuntu with PPA

<a href="https://github.com/creationix/nvm" target="_blank" rel="noreferrer noopener">NVM</a>&nbsp;is known as Node Version Manager, Similarily to RVM (Ruby Version Manager) for Ruby language. NVM provides an option for easy installation of Node.js. You can also install specific Node.js version or multiple Node.js versions on the same system using nvm and use the required version for application. This tutorial will help you to&nbsp;Install and Manage Node.js using NVM.



The default NVM installs under current users home directory, So nvm installation with one user will not be accessible to another user. Windows users can visit our other tutorial to install Nodejs on Windows system.



<h2>Step 1 – Install NVM</h2>



First of all, You need to install NVM on your system. A bash script is available to install nvm on your system. Use the following command to install NVM on your Linux system.



<pre class="wp-block-preformatted">curl https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
</pre>



Reload system environment using this command. It will set the required environment variables to use nvm on the system.



<pre class="wp-block-preformatted">source ~/.profile ## Debian based systems 
source ~/.bashrc ## CentOS/RHEL systems 
</pre>



<h2>Step 2 – Find Available Node.js Version</h2>



At this point, you have installed nvm on your system for the current user. Now find out the available version of Node.js to install. Use&nbsp;<code>ls-remote</code>&nbsp;option to list versions.



<pre class="wp-block-preformatted">nvm ls-remote
</pre>



You will see a long list of available versions.



<pre class="wp-block-preformatted"> ...
 ...
 v10.12.0
 v10.13.0 (LTS: Dubnium)
 v10.14.0 (LTS: Dubnium)
 v10.14.1 (LTS: Dubnium)
 v10.14.2 (LTS: Dubnium)
 v10.15.0 (Latest LTS: Dubnium)
 v11.0.0
 v11.1.0
 v11.2.0
 v11.3.0
 v11.4.0
 v11.5.0
 v11.6.0
 v11.7.0
 v11.8.0
</pre>



<h2>Step 3 – Node.js Installation with NVM</h2>



Now install the node.js version you need to use for running node.js application. Below command will install node.js&nbsp;v8.10.0&nbsp;the LTS release on your system.



<pre class="wp-block-preformatted">nvm install v10.15.0
</pre>



You can have also installed the latest version of Node.js.



<pre class="wp-block-preformatted">nvm install v11.8.0
</pre>



Repeat the above command with the different-2 node.js versions to install multiple versions of node.js on your system.



<h2>Step 4 – Set Node.js Default Version</h2>



As you have installed multiple node.js versions, You can select the specific version of node.js as default version used by system and load in the environment. Use below command to list currently installed version and default set version.



<pre class="wp-block-preformatted">nvm list

 v10.15.0
 v11.8.0
-&gt; system
node -&gt; stable (-&gt; v11.8.0) (default)
stable -&gt; 11.8 (-&gt; v11.8.0) (default)
iojs -&gt; N/A (default)
unstable -&gt; N/A (default)
lts/* -&gt; lts/dubnium (-&gt; v10.15.0)
lts/argon -&gt; v4.9.1 (-&gt; N/A)
lts/boron -&gt; v6.16.0 (-&gt; N/A)
lts/carbon -&gt; v8.15.0 (-&gt; N/A)
lts/dubnium -&gt; v10.15.0
</pre>



You can see that Node.js version 11.8.0 is set as the default version. You can change the default Node.js version. Below command will set 10.15.0 as default Node.js version.



<pre class="wp-block-preformatted">nvm use v10.15.0
</pre>



Now verify current active version of node.js



<pre class="wp-block-preformatted">node --version

v10.15.0
</pre>



<h2>Step 5 – Run Applition with Specific Version</h2>



If you have multiple node.js applications on your system and want to run each with a specific version of node.js. NVM provides you an option to use node.js version for running any application. For example



<pre class="wp-block-preformatted">nvm run v10.15.0 app.js
</pre>



<h2>Step 6 – Remove Unused Node.js Version</h2>



This command will provide a list of installed versions of node.js on your system.



<pre class="wp-block-preformatted">nvm list
</pre>



Now remove any version installed on your system using the following command. Below command will remove Node.js version 10.15.0 from your system.



<pre class="wp-block-preformatted">nvm remove v10.15.0</pre>

NVM&nbsp;is known as Node Version Manager, Similarily to RVM (Ruby Version Manager) for Ruby language. NVM provides an option for easy installati...

React library to implement Zoom, Pan, Pinch on HTML Elements

How to Install Latest Node.js and NPM on Ubuntu with PPA

How to Install and Manage Node.js via NVM