<p>An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from other code on the page so that different parts do not clash, and the code can be kept nice and clean. The Shadow DOM API is a key part of this, providing a way to attach a hidden separated DOM to an element. This article covers the basics of using the Shadow DOM.</p>



<blockquote class="wp-block-quote"><p><strong>Note</strong>: Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (79 and onwards) supports it too; the old Edge didn't.</p></blockquote>



<h2>High-level view</h2>



<p>This article assumes you are already familiar with the concept of the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction" target="_blank" rel="noreferrer noopener nofollow">DOM (Document Object Model)</a> — a tree-like structure of connected nodes that represents the different elements and strings of text appearing in a markup document (usually an HTML document in the case of web documents). As an example, consider the following HTML fragment:</p>



<pre class="wp-block-code"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Simple DOM example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;section&gt;
        &lt;img src="dinosaur.png" alt="A red Tyrannosaurus Rex: A two legged dinosaur standing upright like a human, with small arms, and a large head with lots of sharp teeth."&gt;
        &lt;p&gt;Here we will add a link to the &lt;a href="https://www.mozilla.org/"&gt;Mozilla homepage&lt;/a&gt;&lt;/p&gt;
      &lt;/section&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>



<p>This fragment produces the following DOM structure:</p>



<figure class="wp-block-image size-full"><img src="https://tcmhack.in/wp-content/uploads/2021/09/dom-screenshot.png" alt="" class="wp-image-869"/></figure>



<p><em>Shadow DOM</em> allows hidden DOM trees to be attached to elements in the regular DOM tree — this shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM.</p>



<figure class="wp-block-image size-large"><img src="https://tcmhack.in/wp-content/uploads/2021/09/shadowdom-1-1024x471.png" alt="" class="wp-image-870"/></figure>



<p>There are some bits of shadow DOM terminology to be aware of:</p>



<ul><li><strong>Shadow host:</strong> The regular DOM node that the shadow DOM is attached to.</li><li><strong>Shadow tree:</strong> The DOM tree inside the shadow DOM.</li><li><strong>Shadow boundary:</strong> the place where the shadow DOM ends, and the regular DOM begins.</li><li><strong>Shadow root:</strong> The root node of the shadow tree.</li></ul>



<p>You can affect the nodes in the shadow DOM in exactly the same way as non-shadow nodes — for example appending children or setting attributes, styling individual nodes using element.style.foo, or adding style to the entire shadow DOM tree inside a<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"> <code>&lt;style&gt;</code></a> element. The difference is that none of the code inside a shadow DOM can affect anything outside it, allowing for handy encapsulation.</p>



<p>Note that the shadow DOM is not a new thing by any means — browsers have used it for a long time to encapsulate the inner structure of an element. Think for example of a <code><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video" target="_blank" rel="noreferrer noopener nofollow">&lt;video&gt;</a></code> element, with the default browser controls exposed. All you see in the DOM is the <code>&lt;video&gt;</code> element, but it contains a series of buttons and other controls inside its shadow DOM. The shadow DOM spec has made it so that you are allowed to actually manipulate the shadow DOM of your own custom elements.</p>



<h2>Basic usage</h2>



<p>You can attach a shadow root to any element using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow" target="_blank" rel="noreferrer noopener nofollow"><code>Element.attachShadow()</code></a>&nbsp;method. This takes as its parameter an options object that contains one option —&nbsp;<code>mode</code>&nbsp;— with a value of&nbsp;<code>open</code>&nbsp;or&nbsp;<code>closed</code>:</p>



<pre class="wp-block-code"><code>let shadow = elementRef.attachShadow({mode: 'open'});
let shadow = elementRef.attachShadow({mode: 'closed'});</code></pre>



<p><code>open</code>&nbsp;means that you can access the shadow DOM using JavaScript written in the main page context, for example using the&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/shadowRoot" target="_blank" rel="noreferrer noopener nofollow"><code>Element.shadowRoot</code></a>&nbsp;property:</p>



<pre class="wp-block-code"><code>let myShadowDom = myCustomElem.shadowRoot;</code></pre>



<p>If you attach a shadow root to a custom element with&nbsp;<code>mode: closed</code>&nbsp;set, you won't be able to access the shadow DOM from the outside —&nbsp;<code>myCustomElem.shadowRoot</code>&nbsp;returns&nbsp;<code>null</code>. This is the case with built in elements that contain shadow DOMs, such as&nbsp;<code>&lt;video&gt;</code>.</p>



<p><strong>Note</strong>: As&nbsp;<a href="https://blog.revillweb.com/open-vs-closed-shadow-dom-9f3d7427d1af" target="_blank" rel="noreferrer noopener nofollow">this blog post shows</a>, it is actually fairly easy to work around closed shadow DOMs, and the hassle to completely hide them is often more than it's worth.</p>



<p>If you are attaching a shadow DOM to a custom element as part of its constructor (by far the most useful application of the shadow DOM), you would use something like this:</p>



<pre class="wp-block-code"><code>let shadow = this.attachShadow({mode: 'open'});</code></pre>



<p>When you've attached a shadow DOM to an element, manipulating it is a matter of just using the same DOM APIs as you use for the regular DOM manipulation:</p>



<pre class="wp-block-code"><code>let para = document.createElement('p');
shadow.appendChild(para);
// etc.</code></pre>



<h2 id="working_through_a_simple_example">Working through a simple example</h2>



<p>Now let's walk through a simple example to demonstrate the shadow DOM in action inside a custom element —&nbsp;<code><a href="https://github.com/mdn/web-components-examples/tree/master/popup-info-box-web-component" target="_blank" rel="noreferrer noopener nofollow">&lt;popup-info&gt;</a></code>&nbsp;(see a&nbsp;<a href="https://mdn.github.io/web-components-examples/popup-info-box-web-component/" target="_blank" rel="noreferrer noopener nofollow">live example</a>&nbsp;also). This takes an image icon and a text string, and embeds the icon into the page. When the icon is focused, it displays the text in a pop up information box to provide further in-context information. To begin with, in our JavaScript file we define a class called&nbsp;<code>PopUpInfo</code>, which extends&nbsp;<code>HTMLElement</code>:</p>



<pre class="wp-block-code"><code>class PopUpInfo extends HTMLElement {
  constructor() {
    // Always call super first in constructor
    super();

    // write element functionality in here

    ...
  }
}</code></pre>



<p>Inside the class definition we define the element's constructor, which defines all the functionality the element will have when an instance of it is instantiated.</p>



<h3 id="creating_the_shadow_root">Creating the shadow root</h3>



<p>We first attach a shadow root to the custom element:</p>



<pre class="wp-block-code"><code>// Create a shadow root
let shadow = this.attachShadow({mode: 'open'});</code></pre>



<h3 id="creating_the_shadow_dom_structure">Creating the shadow DOM structure</h3>



<p>Next, we use some DOM manipulation to create the element's internal shadow DOM structure:</p>



<pre class="wp-block-code"><code>// Create spans
let wrapper = document.createElement('span');
wrapper.setAttribute('class', 'wrapper');
let icon = document.createElement('span');
icon.setAttribute('class', 'icon');
icon.setAttribute('tabindex', 0);
let info = document.createElement('span');
info.setAttribute('class', 'info');

// Take attribute content and put it inside the info span
let text = this.getAttribute('data-text');
info.textContent = text;

// Insert icon
let imgUrl;
if(this.hasAttribute('img')) {
  imgUrl = this.getAttribute('img');
} else {
  imgUrl = 'img/default.png';
}
let img = document.createElement('img');
img.src = imgUrl;
icon.appendChild(img);
</code></pre>



<h3 id="styling_the_shadow_dom">Styling the shadow DOM</h3>



<p>After that we create a&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style" target="_blank" rel="noreferrer noopener nofollow"><code>&lt;style&gt;</code></a>&nbsp;element and populate it with some CSS to style it:</p>



<pre class="wp-block-code"><code>// Create some CSS to apply to the shadow dom
let style = document.createElement('style');

style.textContent = `
.wrapper {
  position: relative;
}

.info {
  font-size: 0.8rem;
  width: 200px;
  display: inline-block;
  border: 1px solid black;
  padding: 10px;
  background: white;
  border-radius: 10px;
  opacity: 0;
  transition: 0.6s all;
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 3;
}

img {
  width: 1.2rem;
}

.icon:hover + .info, .icon:focus + .info {
  opacity: 1;
}`;</code></pre>



<h3 id="attaching_the_shadow_dom_to_the_shadow_root">Attaching the shadow DOM to the shadow root</h3>



<p>The final step is to attach all the created elements to the shadow root:</p>



<pre class="wp-block-code"><code>// attach the created elements to the shadow dom
shadow.appendChild(style);
shadow.appendChild(wrapper);
wrapper.appendChild(icon);
wrapper.appendChild(info);</code></pre>



<p>Feel free to ask a question in comments.</p>

An important aspect of web components is encapsulation — being able to keep the markup structure, style, and behavior hidden and separate from ot...

Shadow DOM in JavaScript - TCMHACK

Shadow DOM in JavaScript

<h1>Set</h1><p>The&nbsp;<code><strong>Set</strong></code>&nbsp;object lets you store unique values of any type, whether&nbsp;<a href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive" rel="noopener noreferrer" target="_blank">primitive values</a>&nbsp;or object references.</p><h2>Description</h2><p><code>Set</code>&nbsp;objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the&nbsp;<code>Set</code>&nbsp;<strong>may only occur once</strong>; it is unique in the&nbsp;<code>Set</code>'s collection.</p><h3>Value Equality</h3><p>Because each value in the&nbsp;<code>Set</code>&nbsp;has to be unique, the value equality will be checked. In an earlier version of ECMAScript specification, this was not based on the same algorithm as the one used in the&nbsp;<code>===</code>&nbsp;operator. Specifically, for&nbsp;<code>Set</code>s,&nbsp;<code>+0</code>&nbsp;(which is strictly equal to&nbsp;<code>-0</code>) and&nbsp;<code>-0</code>&nbsp;were different values. However, this was changed in the ECMAScript 2015 specification. See&nbsp;<em>"Key equality for -0 and 0"</em>&nbsp;in the&nbsp;browser compatibility&nbsp;table for details.</p><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NaN" rel="noopener noreferrer" target="_blank">NaN</a></code>&nbsp;and&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined" rel="noopener noreferrer" target="_blank">undefined</a></code>&nbsp;can also be stored in a Set. All&nbsp;<code>NaN</code>&nbsp;values are equated (i.e.&nbsp;<code>NaN</code>&nbsp;is considered the same as&nbsp;<code>NaN</code>, even though&nbsp;<code>NaN !== NaN</code>).</p><h2>Constructor</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/Set" rel="noopener noreferrer" target="_blank">Set()</a></code> Creates a new&nbsp;<code>Set</code>&nbsp;object.</p><h2>Static properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@species" rel="noopener noreferrer" target="_blank">get Set[@@species]</a></code> The constructor function that is used to create derived objects.</p><h2>Instance properties</h2><p><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/size" rel="noopener noreferrer" target="_blank">Set.prototype.size</a></code> Returns the number of values in the&nbsp;<code>Set</code>&nbsp;object.</p><h2>Instance methods</h2><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/add" rel="noopener noreferrer" target="_blank">Set.prototype.add(value)</a></code> Appends&nbsp;<code>value</code>&nbsp;to the&nbsp;<code>Set</code>&nbsp;object. Returns the&nbsp;<code>Set</code>&nbsp;object with added value.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/clear" rel="noopener noreferrer" target="_blank">Set.prototype.clear()</a></code> Removes all elements from the&nbsp;<code>Set</code>&nbsp;object.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/delete" rel="noopener noreferrer" target="_blank">Set.prototype.delete(value)</a></code> Removes the element associated to the&nbsp;<code>value</code>&nbsp;and returns a boolean asserting whether an element was successfully removed or not.&nbsp;<code>Set.prototype.has(value)</code>&nbsp;will return&nbsp;<code>false</code>&nbsp;afterwards.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/has" rel="noopener noreferrer" target="_blank">Set.prototype.has(value)</a></code> Returns a boolean asserting whether an element is present with the given value in the&nbsp;<code>Set</code>&nbsp;object or not.</li></ol><h3>Iteration methods</h3><ol><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/@@iterator" rel="noopener noreferrer" target="_blank">Set.prototype[@@iterator]()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.keys()</a></code> Returns a new iterator object that yields the values for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>values()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/values" rel="noopener noreferrer" target="_blank">Set.prototype.values()</a></code> Returns a new iterator object that yields the&nbsp;<strong>values</strong>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object in insertion order. (For Sets, this is the same as the&nbsp;<code><strong>keys()</strong></code>&nbsp;method.)</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/entries" rel="noopener noreferrer" target="_blank">Set.prototype.entries()</a></code> Returns a new iterator object that contains&nbsp;<strong>an array of&nbsp;</strong><code><strong>[value,&nbsp;value]</strong></code>&nbsp;for each element in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. This is similar to the&nbsp;<code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map" rel="noopener noreferrer" target="_blank">Map</a></code>&nbsp;object, so that each entry's&nbsp;<em>key</em>&nbsp;is the same as its&nbsp;<em>value</em>&nbsp;for a&nbsp;<code>Set</code>.</li><li><code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set/forEach" rel="noopener noreferrer" target="_blank">Set.prototype.forEach(callbackFn[,&nbsp;thisArg])</a></code> Calls&nbsp;<code>callbackFn</code>&nbsp;once for each value present in the&nbsp;<code>Set</code>&nbsp;object, in insertion order. If a&nbsp;<code>thisArg</code>&nbsp;parameter is provided, it will be used as the&nbsp;<code>this</code>&nbsp;value for each invocation of&nbsp;<code>callbackFn</code>.</li></ol><h2>Examples</h2><h3>Using the Set object</h3><pre class="ql-syntax" spellcheck="false">const mySet1 = new Set()

mySet1.add(1)           // Set [ 1 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add(5)           // Set [ 1, 5 ]
mySet1.add('some text') // Set [ 1, 5, 'some text' ]
const o = {a: 1, b: 2}
mySet1.add(o)

mySet1.add({a: 1, b: 2})   // o is referencing a different object, so this is okay
mySet1.has(1)              // true
mySet1.has(3)              // false, since 3 has not been added to the set
mySet1.has(5)              // true
mySet1.has(Math.sqrt(25))  // true
mySet1.has('Some Text'.toLowerCase()) // true
mySet1.has(o)       // true

mySet1.size         // 5

mySet1.delete(5)    // removes 5 from the set
mySet1.has(5)       // false, 5 has been removed

mySet1.size         // 4, since we just removed one value

console.log(mySet1)
// logs Set(4) [ 1, "some text", {…}, {…} ] in Firefox
// logs Set(4) { 1, "some text", {…}, {…} } in Chrome
</pre><h3>Iterating Sets</h3><pre class="ql-syntax" spellcheck="false">// iterate over items in set
// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.keys()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
for (let item of mySet1.values()) console.log(item)

// logs the items in the order: 1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}
// (key and value are the same here)
for (let [key, value] of mySet1.entries()) console.log(key)

// convert Set object to an Array object, with Array.from
const myArr = Array.from(mySet1) // [1, "some text", {"a": 1, "b": 2}, {"a": 1, "b": 2}]

// the following will also work if run in an HTML document
mySet1.add(document.body)
mySet1.has(document.querySelector('body')) // true

// converting between Set and Array
const mySet2 = new Set([1, 2, 3, 4])
mySet2.size                    // 4
[...mySet2]                    // [1, 2, 3, 4]

// intersect can be simulated via
const intersection = new Set([...mySet1].filter(x =&gt; mySet2.has(x)))

// difference can be simulated via
const difference = new Set([...mySet1].filter(x =&gt; !mySet2.has(x)))

// Iterate set entries with forEach()
mySet1.forEach(function(value) {
  console.log(value)
})

// 1
// 2
// 3
// 4
</pre><h3>Implementing basic set operations</h3><pre class="ql-syntax" spellcheck="false">function isSuperset(set, subset) {
    for (let elem of subset) {
        if (!set.has(elem)) {
            return false
        }
    }
    return true
}

function union(setA, setB) {
    let _union = new Set(setA)
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union
}

function intersection(setA, setB) {
    let _intersection = new Set()
    for (let elem of setB) {
        if (setA.has(elem)) {
            _intersection.add(elem)
        }
    }
    return _intersection
}

function symmetricDifference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        if (_difference.has(elem)) {
            _difference.delete(elem)
        } else {
            _difference.add(elem)
        }
    }
    return _difference
}

function difference(setA, setB) {
    let _difference = new Set(setA)
    for (let elem of setB) {
        _difference.delete(elem)
    }
    return _difference
}

// Examples
const setA = new Set([1, 2, 3, 4])
const setB = new Set([2, 3])
const setC = new Set([3, 4, 5, 6])

isSuperset(setA, setB)          // returns true
union(setA, setC)               // returns Set {1, 2, 3, 4, 5, 6}
intersection(setA, setC)        // returns Set {3, 4}
symmetricDifference(setA, setC) // returns Set {1, 2, 5, 6}
difference(setA, setC)          // returns Set {1, 2}

</pre><h3>Relation with Array objects</h3><pre class="ql-syntax" spellcheck="false">let myArray = ['value1', 'value2', 'value3']

// Use the regular Set constructor to transform an Array into a Set
let mySet = new Set(myArray)

mySet.has('value1')     // returns true

// Use the spread operator to transform a set into an Array.
console.log([...mySet]) // Will show you exactly the same Array as myArray
</pre><h3>Remove duplicate elements from the array</h3><pre class="ql-syntax" spellcheck="false">// Use to remove duplicate elements from the array

const numbers = [2,3,4,4,2,3,3,4,4,5,5,6,6,7,5,32,3,4,5]

console.log([...new Set(numbers)])
// [2, 3, 4, 5, 6, 7, 32]
</pre><h3>Relation with Strings</h3><pre class="ql-syntax" spellcheck="false">let text = 'India'

const mySet = new Set(text)  // Set(5) {'I', 'n', 'd', 'i', 'a'}
mySet.size  // 5

//case sensitive &amp; duplicate ommision
new Set("Firefox")  // Set(7) { "F", "i", "r", "e", "f", "o", "x" }
new Set("firefox")  // Set(6) { "f", "i", "r", "e", "o", "x" }
</pre><h3>Use Set to ensure the uniqueness of a list of values</h3><pre class="ql-syntax" spellcheck="false">const array = Array.from(document.querySelectorAll('[id]')).map(e =&gt; e.id);
const set = new Set(array);
console.assert(set.size == array.length);
</pre><p>That's how Set works in JavaScript. Feel free to leave a comment below.</p>

The Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values. You can iterate through the elements of a set in insertion order. A value in the Set may only occur once; it is unique in the Set's collectionThe Set object lets you store unique values of any type, whether primitive values or object references. Set objects are collections of values...

Explanation & Working of Set's in JavaScript - TCMHACK

Explanation & Working of Set's in JavaScript

<p>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.</p><h2>Features</h2><ul><li><strong>Fast and easy to use</strong></li><li><strong>Light, without external dependencies</strong></li><li><strong>Mobile gestures, touchpad gestures and desktop mouse events support</strong></li><li><strong>Powerful context usage, which gives you a lot of freedom</strong></li><li><strong>Highly customizable</strong></li><li><strong>Animations and many options</strong></li></ul><p><a href="https://prc5.github.io/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank" style="color: rgb(255, 255, 250);">Demo</a></p><p><a href="https://github.com/prc5/react-zoom-pan-pinch/" rel="noopener noreferrer" target="_blank">Github</a></p><h2>Install</h2><pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-zoom-pan-pinch
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false">yarn add react-zoom-pan-pinch
</pre><h2>Usage</h2><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      <span class="hljs-tag">&lt;<span class="hljs-name">TransformWrapper</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">TransformWrapper</span>&gt;</span>
    );
  }
}
</pre><p>OR</p><pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
<span class="hljs-keyword">import</span> { <span class="hljs-title class_">TransformWrapper</span>, <span class="hljs-title class_">TransformComponent</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">"react-zoom-pan-pinch"</span>;

<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
  <span class="hljs-title function_">render</span>() {
    <span class="hljs-keyword">return</span> (
      &lt;<span class="hljs-title class_">TransformWrapperdefaultScale</span>={<span class="hljs-number">1</span>}defaultPositionX={<span class="hljs-number">200</span>}defaultPositionY={<span class="hljs-number">100</span>}
      &gt;
        {<span class="hljs-function">(<span class="hljs-params">{ zoomIn, zoomOut, resetTransform, ...rest }</span>) =&gt;</span> (
          <span class="hljs-tag">&lt;<span class="hljs-name">React.Fragment</span>&gt;&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"tools"</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomIn}</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{zoomOut}</span>&gt;</span>-<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{resetTransform}</span>&gt;</span>x<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;&lt;/<span class="hljs-name">div</span>&gt;&lt;<span class="hljs-name">TransformComponent</span>&gt;&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"test"</span> /&gt;&lt;<span class="hljs-name">div</span>&gt;</span>Example text<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;&lt;/<span class="hljs-name">TransformComponent</span>&gt;&lt;/<span class="hljs-name">React.Fragment</span>&gt;</span>
        )}
      &lt;/<span class="hljs-title class_">TransformWrapper</span>&gt;
    );
  }
}
</pre><h2>Props of TransformWrapper</h2><p>PropsDefaultTypescale1numberpositionXautonumberpositionYautonumberdefaultPositionXnullnumberdefaultPositionYnullnumberdefaultScalenullnumberoptions{...}objectwheel{...}objectpan{...}objectpinch{...}objectzoomIn{...}objectzoomOut{...}objectdoubleClick{...}objectreset{...}objectscalePadding{...}objectonWheelStartnullFunctiononWheelnullFunctiononWheelStopnullFunctiononPanningStartnullFunctiononPanningnullFunctiononPanningStopnullFunctiononPinchingStartnullFunctiononPinchingnullFunctiononPinchingStopnullFunctiononZoomChangenullFunctionenablePaddingtrueBooleanenablePanPaddingtrueBoolean</p><h4>Options prop elements</h4><p>PropsDefaultTypedisabledfalsebooleantransformEnabledtruebooleanminPositionXnullnull, numbermaxPositionXnullnull, numberminPositionYnullnull, numbermaxPositionYnullnull, numberminScale1numbermaxScale8numberlimitToBoundstruebooleanlimitToWrapperfalsebooleancenterContenttrueboolean</p><h4>scalePadding prop elements</h4><p>PropsDefaultTypedisabledfalsebooleansize0.45numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Wheel prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep6.5numberwheelEnabledtruebooleantouchPadEnabledtruebooleanlimitsOnWheeltrueboolean</p><h4>Pan prop elements</h4><p>PropsDefaultTypedisabledfalsebooleandisableOnTarget[]array of class names or node tags (div,span...)lockAxisXfalsebooleanlockAxisYfalsebooleanvelocityfalsebooleanvelocityEqualToMovefalsebooleanvelocitySensitivity1numbervelocityMinSpeed1.2numbervelocityBaseTime1800numbervelocityAnimationTypeeaseOutstringpaddingtruebooleanpaddingSize40numberanimationTime200numberanimationTypeeaseOutstring</p><h4>Pinch prop elements</h4><p>PropsDefaultTypedisabledfalseboolean</p><h4>zoomIn prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>zoomOut prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>doubleClick prop elements</h4><p>PropsDefaultTypedisabledfalsebooleanstep70numberanimationtruebooleananimationTime200numberanimationTypeeaseOutstringmodezoomInzoomIn / zoomOut / reset</p><h4>reset prop elements</h4><p>PropsDefaultTypedisabledfalsebooleananimationtruebooleananimationTime200numberanimationTypeeaseOutstring</p><h4>Animations types</h4><p>ValueeaseOutlineareaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInQuarteaseOutQuarteaseInOutQuarteaseInQuinteaseOutQuinteaseInOutQuint</p><h4>Double click modes</h4><p>ValuezoomInzoomOutreset</p><h2>Values returned from TransformWrapper component</h2><p>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</p><h2>License</h2><p>MIT ©&nbsp;<a href="https://github.com/prc5" rel="noopener noreferrer" target="_blank">prc5</a></p><p>That's it. Feel free to leave a comment.</p>

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

<p>In this example we will show how to implement the component scrolling via mouse drag &amp; drop like Google Map, Google Earth, Figma etc.</p>
<p>To implement the scrolling we will use the <code><a href="https://github.com/Norserium/react-indiana-drag-scroll" target="_blank" rel="noopener noreferrer">react-indiana-drag-scroll</a></code> library which is great library to Implement scroll on drag.</p>
<p>So let's get started.</p>
<h2>Demo</h2>
<p>Try it yourself! Go to&nbsp;<a href="https://norserium.github.io/react-indiana-drag-scroll/" target="_blank" rel="noopener noreferrer">demo website</a> / <a href="https://codesandbox.io/s/react-indiana-drag-scroll-default-iw9xh" target="_blank" rel="noopener noreferrer">sandbox</a></p>
<h2>Install</h2>
<pre class="ql-syntax" spellcheck="false">npm install <span class="hljs-attr">--save</span> react-indiana-drag-scroll
</pre>
<p>or install via yarn</p>
<pre class="ql-syntax" spellcheck="false">yarn add react-indiana-drag-scroll
</pre>
<h2>Usage</h2>
<pre class="ql-syntax" spellcheck="false"><span class="hljs-keyword">import</span> <span class="hljs-title class_">React</span>, { <span class="hljs-title class_">Component</span> } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
<span class="hljs-keyword">import</span> <span class="hljs-title class_">ScrollContainer</span> <span class="hljs-keyword">from</span> <span class="hljs-string">'react-indiana-drag-scroll'</span>;
<span class="hljs-keyword">class</span> <span class="hljs-title class_">Example</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_ inherited__">Component</span> {
    <span class="hljs-title function_">render</span> () {
        <span class="hljs-keyword">return</span> (
            <span class="hljs-tag">&lt;<span class="hljs-name">ScrollContainer</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"scroll-container"</span>&gt;</span>
                { ... }
            <span class="hljs-tag">&lt;/<span class="hljs-name">ScrollContainer</span>&gt;</span>
        )
    }
}
</pre>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Component properties</h2>
<a id="user-content-component-properties" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#component-properties" aria-label="Permalink: Component properties"></a></div>
<table>
<thead>
<tr>
<th>Prop</th>
<th>Type</th>
<th>Description</th>
<th>Default</th>
</tr>
</thead>
<tbody>
<tr>
<td>vertical</td>
<td>Bool</td>
<td>Allow vertical drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>horizontal</td>
<td>Bool</td>
<td>Allow horizontal drag scrolling</td>
<td>true</td>
</tr>
<tr>
<td>hideScrollbars</td>
<td>Bool</td>
<td>Hide the scrollbars</td>
<td>true</td>
</tr>
<tr>
<td>activationDistance</td>
<td>Number</td>
<td>The distance that distinguish click and drag start</td>
<td>10</td>
</tr>
<tr>
<td>children</td>
<td>Node</td>
<td>The content of scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onScroll</td>
<td>Function</td>
<td>Invoked when user scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onEndScroll</td>
<td>Function</td>
<td>Invoked when user ends scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onStartScroll</td>
<td>Function</td>
<td>Invoked when user starts scrolling container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>onClick</td>
<td>Function</td>
<td>Invoked when user clicks the scrolling container without dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>component</td>
<td>String</td>
<td>The component used for the root node.</td>
<td>'div'</td>
</tr>
<tr>
<td>className</td>
<td>String</td>
<td>The custom classname for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>draggingClassName</td>
<td>String</td>
<td>The classname for the container during dragging</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>style</td>
<td>Number</td>
<td>The custom styles for the container</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>innerRef</td>
<td>ElementType</td>
<td>The ref to the root node (experimental alternative to&nbsp;<code>getElement</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>ignoreElements</td>
<td>String</td>
<td>Selector for elements that should not trigger the scrolling behaviour (for example,&nbsp;<code>".modal, dialog"</code>&nbsp;or&nbsp;<code>"*[prevent-drag-scroll]"</code>)</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>nativeMobileScroll</td>
<td>Bool</td>
<td>Use native mobile drag scroll for mobile devices</td>
<td>true</td>
</tr>
<tr>
<td>buttons</td>
<td>Array</td>
<td>The list of mouse button numbers that will activate the scroll by drag</td>
<td>[0]</td>
</tr>
</tbody>
</table>
<div class="markdown-heading" dir="auto">
<h2 class="heading-element" dir="auto" tabindex="-1">Static functions</h2>
<a id="user-content-static-functions" class="anchor" href="https://github.com/Norserium/react-indiana-drag-scroll#static-functions" aria-label="Permalink: Static functions"></a></div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Returns</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>getElement</td>
<td>HTMLElement</td>
<td>Returns the HTML element</td>
</tr>
</tbody>
</table>
<h2>How to set the initial scroll?</h2>
<p>To set initial scroll you need get the ref to the root node of the&nbsp;<code>ScrollContainer</code>. It can be implemented by&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">using&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">innerRef</a></code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-innerref-0g8v5?file=/index.js" target="_blank" rel="noopener noreferrer">property</a>&nbsp;or&nbsp;<a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">the static function&nbsp;</a><code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-getelement-99o6q" target="_blank" rel="noopener noreferrer">getElement</a></code>. At the worst you can use the&nbsp;<code><a href="https://codesandbox.io/s/react-indiana-drag-scroll-initial-scroll-finddomnode-dvdop" target="_blank" rel="noopener noreferrer">ReactDOM.findDOMNode</a></code>&nbsp;method.</p>
<h2>License</h2>
<p>The source code is licensed under MIT, all images (except&nbsp;<a href="https://www.freepik.com/free-vector/ancient-egypt-hieroglyphics-background-with-flat-design_2754100.htm" target="_blank" rel="noopener noreferrer">hieroglyphs</a>) are copyrighted to their respective owner &copy;&nbsp;<a href="https://github.com/norserium" target="_blank" rel="noopener noreferrer">Norserium</a></p>
<p>That's it. Feel free to leave a comment below.</p>

Enhance your React applications by implementing intuitive mouse drag-and-drop scrolling. This article provides a comprehensive guide on creating reusable React components that enable users to scroll content effortlessly by clicking and dragging. Discover practical examples and best practices to elevate your project's user experience.

React component scrolling via Mouse Drag & Drop - TCMHACK

React component scrolling via Mouse Drag & Drop

<p>JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write less code and do more. ES6 introduces us to many great features like arrow functions, template strings, class destruction, Modules… and more. Let’s take a look.</p>



<h2>Basic ES6 Features are</h2>



<ul><li>The let &amp; const keyword</li><li>Arrow Functions</li><li>The For/Of Loop</li><li>Classes</li><li>Promises</li><li>Template Literals</li><li>Default Parameters</li><li>Array and object destructing</li><li>Rest parameter and Spread operator</li><li>Import and export</li></ul>



<h2>The let &amp; const keyword</h2>



<p>The <strong><code>let</code></strong> keyword allows you to declare a variable with block scope.</p>



<pre class="wp-block-code"><code>var x = 10; // Here x is 10
{
    let x = 2; // Here x is 2
}
// Here x is 10</code></pre>



<p>The <strong><code>const</code></strong> keyword allows you to declare a constant (a JavaScript variable with a constant value). <strong><code>Const</code></strong> variables must be assigned a value when they are declared:</p>



<p>Constants are similar to <code>let</code> variables, except that the value cannot be changed.</p>



<pre class="wp-block-code"><code>const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error</code></pre>



<h2>Arrow Functions</h2>



<p><strong>Arrow functions</strong> allows a short syntax for writing function expressions.</p>



<p>You don't need the <code>function</code> keyword, the <code>return</code> keyword, and the curly <code>brackets</code>.</p>



<pre class="wp-block-code"><code>// ES5
var x = function(x, y) {
    return x * y;
}
// ES6
const x = (x, y) =&gt; x * y;</code></pre>



<ul><li>Arrow functions do not have their own <code>this</code>. They are not well suited for defining <code>object</code> methods.</li><li>Arrow functions are not <code>hoisted</code>. They must be defined before they are used.</li><li>Using <code>const</code> is safer than using <code>var</code>, because a function expression is always a constant value.</li><li>You can only omit the <code>return</code> keyword and the curly <code>brackets</code> if the function is a single statement. Because of this, it might be a good habit to always keep them:</li></ul>



<pre class="wp-block-code"><code>const x = (x, y) =&gt; { return x * y };
OR
const x = (x, y) =&gt; x * y; // no need of return keyword in case of single statement</code></pre>



<h2>The For/Of Loop</h2>



<p>The JavaScript <code>for/of</code> statement loops through the values of an iterable objects. </p>



<p><code><strong>for/of</strong></code> lets you loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more.</p>



<p>The <code>for/of</code> loop has the following syntax:</p>



<pre class="wp-block-code"><code>for (variable of iterable) {
    // code block to be executed
}

<strong>Example:
</strong>var cars = &#91;"BMW", "Volvo", "Mini"];
for (var x of cars) {
  document.write(x + "&lt;br &gt;");
}</code></pre>



<p><strong><em>variable</em></strong> - For every iteration the value of the next property is assigned to the variable. Variable can be declared with <code>const</code>, <code>let</code>, or <code>var</code>.<br><strong><em>iterable</em></strong> - An <code>object</code> that has iterable properties.</p>



<h2>Classes</h2>



<p>Classes are the core of object oriented programming (OOP). They make your code more secure and encapsulated. Using classes gives your code a nice structure and keeps it oriented.</p>



<p>JavaScript <strong><code>Classes</code></strong> are templates for JavaScript Objects.</p>



<pre class="wp-block-code"><code>class ClassName {
    constructor() { … }
}</code></pre>



<p>To create a <code><span class="highlight">class</span></code>, use the class keyword followed by the name of the class with two curly brackets.</p>



<pre class="wp-block-code"><code>class Car {
    constructor(name, year) {
        this.name = name;
        this.year = year;
    }
}</code></pre>



<h2>Promises</h2>



<p>Promises are a new feature of ES6. It’s a method to write asynchronous code. It can be used when, for example, we want to fetch data from an API, or when we have a function that takes time to be executed. Promises make it easier to solve the problem, so let’s create our first Promise!</p>



<pre class="wp-block-code"><code>let myPromise = new Promise(function(resolve, reject) {
    resolve(); // when successful
    reject(); // when error
});
// Must wait for a fulfilled Promise.
myPromise.then(
    function(value) { // code if successful },
    function(error) { // code if some error }
);</code></pre>



<p>If you log your console, it will return a Promise. So, if we want to execute a function after data is fetched, we will use a Promise. The Promise takes two parameters: <code>resolve</code> and <code>reject</code> to handle an expected error.</p>



<pre class="wp-block-code"><code>let&nbsp;myPromise =&nbsp;new&nbsp;Promise(function(resolve, reject) {
&nbsp; setTimeout(function() { resolve("Hello World!!"); },&nbsp;3000);
});
myPromise.then(function(value) {
&nbsp; console.log('Success', value);
}, function(error) {
  console.log('Error', error);
});</code></pre>



<h2>Template Literals</h2>



<p>Template literals or template strings are pretty cool. We don’t have to use the plus (+) operator to concatenate strings, or when we want to use a variable inside a string.</p>



<pre class="wp-block-code"><code><strong>The old syntax: ES5
</strong>function myFunct(name, age) {
    return 'Hi, My name is: '+ name + ' and i am '+ age + ' years old';
}
console.log(myFunct("TCM", 26));
<strong>Output: </strong>Hi, My name is: TCM and i am 26 years old

<strong>The New syntax: ES6</strong>
const myFunct = (name, age) =&gt; `Hi, My name is: NULL and i am NULL years old`;
console.log(myFunct("TCM", 26));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>So simple! It’s a really huge difference between the old syntax and ES6. When playing with strings, the literal string in ES6 looks more organized and well structured than ES5.</p>



<h2>Default parameters</h2>



<p>When I work in PHP, I usually use default parameters. These allow you to define a parameter in advance.</p>



<p>So, when you forget to write the parameter, it won’t return an <code>undefined</code> error because the parameter is already defined in the default. So when you run your function with a missed parameter, it will take the value of the default parameter and it will not return an error. </p>



<p>Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age) =&gt; <span style="background-color: inherit; font-size: inherit;">Hi, My name is: NULL and i am NULL years old</span>;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am undefined years old</code></pre>



<p>The function above returns undefined, because we forgot to give it the second parameter <strong><code>age</code></strong>.</p>



<p>But if we used the default parameter, it won’t return undefined, and it will use its value when we forget to assign a parameter.</p>



<p> Look at this example:</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<h2>Array and Object Destructing</h2>



<p>Destruction makes the assignment of the values of an array or object to the new variable easier.</p>



<p>The old syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let id = user.id;
let name = user.name;
let age = user.age;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES6 syntax:</p>



<pre class="wp-block-code"><code>const user = {
  id: 12345,
  name: "TCM",
  age: 26
};

let { id, name, age } = user;
console.log(id, name, age);
<strong>Output: </strong>12345 TCM 26</code></pre>



<p>With ES5, we have to assign each value to each variable. With ES6, we just put our values within curly brackets to get any property of the object.</p>



<p>Note: if you assign a variable that is not identical to the name of property, it will return <code>undefined</code>. For example, if the name of the property is <code>name</code> and we assign it to a <code>username</code> <code>variable</code>, it will return <code>undefined</code>.</p>



<h2>Rest Parameter and Spread Operator</h2>



<p>The Rest Parameters syntax allows a function to accept an indefinite number of arguments as an <code>array</code>.</p>



<pre class="wp-block-code"><code>const sum = (…args) =&gt; args.reduce((total, num) =&gt; total + num, 0);
console.log(sum(1, 2, 3));
<strong>Output:</strong> 6</code></pre>



<p>The Spread Operator has the same syntax as the rest parameter, but the spread operator takes the Array itself and not just the arguments. We can use the Spread parameter to get the values of an Array, instead of using a for loop or any other method.</p>



<pre class="wp-block-code"><code>const arr=&#91;'said', 20, 'Hi', 'How are you?'];

const Func = array =&gt; &#91;...array, "hello world"];
console.log(Func(arr));
<strong>Output</strong>: &#91;"said", 20, "Hi", "How are you?", "hello world"]</code></pre>



<h2>Import and Export</h2>



<p>Using&nbsp;<code>import</code>&nbsp;and<code>&nbsp;export</code>&nbsp;in your JavaScript application makes it more powerful. They allow you to create separate and reusable components.</p>



<p>If you are familiar with any JavaScript MVC framework, you will see that they use&nbsp;<code>import</code>&nbsp;and&nbsp;<code>export</code>&nbsp;to handle the components most of the time. So how do they really work?</p>



<p>It is simple!&nbsp;<code>export</code>&nbsp;allows you to export a module to be used in another JavaScript component. We use&nbsp;<code>import</code>&nbsp;to import that module to use it in our component.</p>



<p>For example, we have two files. The first is named&nbsp;<code>detailComponent.js</code> and the second is named <code>homeComponent.js</code>.</p>



<p>In&nbsp;<code>detailComponent.js</code> we are going to export the&nbsp;<code>detail</code>&nbsp;function.</p>



<pre class="wp-block-code"><code>const myFunct = (name, age = 26) =&gt; Hi, My name is: NULL and i am NULL years old;
export default myFunct;</code></pre>



<p>And if we want to use this function in&nbsp;<code>homeComponent.js</code>, we will just use&nbsp;<code>import</code>.</p>



<pre class="wp-block-code"><code>import myFunct from './detailComponent.js';
console.log(myFunct("TCM"));
Output: Hi, My name is: TCM and i am 26 years old</code></pre>



<p>If we want to import more than one module, we just put them within curly brackets.</p>



<pre class="wp-block-code"><code>import {myFunct, user, profile} from './detailComponent.js';
console.log(myFunct("TCM"));
console.log(user);
console.log(profile);</code></pre>



<p>So cool, isn’t it?!  Feel free to leave a comment below.</p>

JavaScript ECMAScript 6 (ES6) brings new syntax and new awesome features to make your code more modern and more readable. It allows you to write ...

Overview of ES6 Features in JavaScript - TCMHACK

Overview of ES6 Features in JavaScript

<h2>Prerequisites</h2>

<p>There are a few things you should know in advance before you start playing around with React.</p>

<p>Here are what I consider to be React prerequisites.</p>

<ul>
<li>Basic familiarity with HTML &amp; CSS.</li>
<li>Basic knowledge of JavaScript and programming.</li>
<li>Basic understanding of the <a href="https://www.w3schools.com/js/js_htmldom.asp" target="_blank" rel="noreferrer noopener" aria-label="DOM (opens in a new tab)">DOM</a>.</li>
<li>Familiarity with ES6 syntax and features.</li>
<li><a href="../../../../blog/how-to-install-and-manage-node-js-via-nvm/">Node.js and npm</a> installed globally.</li>
</ul>

<h2>Setup and Installation</h2>

<p><strong><em>npx create-react-app</em></strong> is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.</p>

<pre class="wp-block-code"><code>npx create-react-app react-app</code></pre>

<p>Here <strong><em>react-app</em></strong> is the folder name in which react config &amp; setup files will be created by react to run a react-app.</p>
<p>Go to newly created app and run the below command to run the app.</p>

<pre class="wp-block-code"><code>cd react-app
npm start</code></pre>

<p><strong><em>npm start</em></strong> will run your react app.</p>
<p>Now, Edit <strong><em>src/App.js</em></strong> and save to view the effect.</p>

<p><strong>Feel free to leave a comment for any questions and issues.</strong></p>

npx create-react-app is the command to setup and install a react app. Its a built in package comes with nodejs. Run the below command to create a react app. It will take some time, wait for it to complete the setup.


There are a few things you should know in advance before you start playing around with React.



Here are what I consider to be ...

Getting Started with React 

<h2>What is React?</h2>

<p>React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called &ldquo;components&rdquo;.</p>

<blockquote class="wp-block-quote">
<p>ReactJS is only a frontend library and not the whole framework, which deals with the View component of MVC (Model &ndash; View &ndash; Controller).</p>
</blockquote>

<p>ReactJS was developed by Jordan Walke, a software engineer working at Facebook. Facebook implemented ReactJS in 2011 in its newsfeed section, but it was released to the public in May 2013. After the implementation of ReactJS, Facebook&rsquo;s UI underwent drastic improvement. This resulted in satisfied users and a sudden boost in its popularity.</p>

<h2>Why it is used?</h2>

<p>In ReactJS, everything is a component. Consider one lego house as an entire application. Then compare each of the lego blocks to a component which acts as a building block. These blocks components are integrated together to build one bigger and dynamic application.</p>

<p>The biggest advantage of using components is that you can change any component at any point in time without affecting the rest of the applications. This feature is most effective when implemented with larger and real-time applications where data changes frequently. Each time any data is added or updated, ReactJS automatically updates the specific component whose state has actually changed. This saves the browser from the task of reloading the whole application to reflect the changes.</p>

<h2>Features Of React</h2>

<p>Now that you have understood what is React and why it is used, lets now uncover few of its intriguing features.</p>

<h3>1. <strong>JSX</strong></h3>

<p>JSX stands for JavaScript XML. Its an XML/ HTML like syntax used by React. It extends the ECMAScript so that XML/ HTML like text can co-exist along with JavaScript react code. This syntax is used by the pre-processors like <em>Babel</em> to transform HTML like text found in JavaScript files into standard JavaScript objects. With JSX, we can go a step further by again embedding the HTML code inside the JavaScript. This makes HTML codes easy to understand and boosts JavaScript&rsquo;s performance while making our application robust.</p>
<p>Let&rsquo;s see how to write Hello World Program using JSX.</p>

<pre class="wp-block-code"><code>const MyComponent = React.createClass({
    render: function () {
        return(    
            &lt;h2&gt;Hello World&lt;/h2&gt;
        );
    }
});<br><br>ReactDOM.render(<br>    &lt;MyComponent/&gt;, document.getElementById('content')<br>);</code></pre>

<h3>2. <strong>Virtual DOM</strong></h3>

<p>Like an actual DOM, virtual DOM is also a node tree that lists the elements and their attributes and content as Objects and their properties. React&rsquo;s render function creates a node tree out of the React components. Then, it updates this tree in response to the mutations in data model caused by various actions done either by the user or by the system.</p>

<div class="wp-block-group">
<div class="wp-block-group__inner-container">
<p><strong>This <em>Virtual DOM</em> works in three simple steps.</strong></p>
<ol>
<li>Whenever any underlying data changes, the entire UI is re-rendered in Virtual DOM representation.</li>
<li>Then the difference between the previous DOM representation and the new one is calculated.</li>
<li>Once the calculations are done, the real DOM will be updated with only the things that have actually changed.</li>
</ol>
</div>
</div>

<p>You can think of it as a patch. As patches are applied only to the affected area, similarly, the virtual DOM acts as patches and are applied to the elements which are updated or changed, in the real DOM.</p>
<p>This makes our application faster and there is no memory wastage.</p>

<h3>3. Testability</h3>

<p>React views can be used as functions of the state (state is an object which determines how a component will render and behave). Thus, we can easily manipulate with state of the components which we pass to the ReactJS view and take a look at the output and triggered actions, events, functions, etc. This makes React applications quite easy to test and debug.</p>

<h3>4. Server-Side Rendering(SSR)</h3>

<p>Server-Side rendering allows you to pre-render the initial state of your react components at the server side only. With SSR, the server&rsquo;s response to the browser becomes only the HTML of the page which is now ready to be rendered. Thus, the browser can now start rendering without having to wait for all the JavaScript to be loaded and executed. As a result, the webpage loads faster. Here the user will be able to see the web page in spite of React still downloading the JavaScript, creating the virtual DOM, linking events, etc. at the back end.</p>
<h3>5. One-Way Data Binding</h3>

<p>Unlike other frameworks, ReactJS follows unidirectional data flow or one-way data binding. The major advantage of One-Way-Data binding is that throughout the application the data flows in a single direction which gives you better control over it. Because of this, application&rsquo;s state is contained in specific stores and as a result, rest of the components remains loosely coupled. This makes our application more flexible leading to increased efficiency.</p>
<h3>6. Simplicity</h3>

<p>Use of JSX files makes the application really simple and easy to code as well as understand. Even though we can use plain JavaScript here, using JSX is easier. React&rsquo;s component-based approach along with distinct lifecycle methods also make it simple to learn.</p>

<h3>7. Learning Curve</h3>

<p>Learning curve of React is quite low as compared to other frameworks. Anyone having even basic knowledge of programming can easily learn React. So, if you have previous knowledge of HTML and JavaScript you can get your hands on it very quickly.</p>

<p>This brings us to the end of this blog on what is React. Hope I was able to clearly explain what is React and why you should use it.</p>

<p><strong>Please feel free to comment your questions. Thanks</strong></p>

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UI...

Introduction to React

<p><strong><a rel="noreferrer noopener" aria-label="Intro.js (opens in a new tab)" href="https://introjs.com/" target="_blank">Intro.js</a></strong> is Step-by-step guide and feature introduction. It is open-source and free to use.</p>



<h3>WHY USING INTRO.JS?</h3>



<p>When new users visit your website or product you should demonstrate your product features using a step-by-step guide. Even when you develop and add a new feature to your product, you should be able to represent them to your users using a user-friendly solution. Intro.js is developed to enable web and mobile developers to create a step-by-step introduction easily.</p>



<h3>Features:</h3>



<ul><li><strong>No dependencies, fast and small:</strong> 10KB JavaScript and 2.5KB CSS, that's all (minified, gzipped).</li><li><strong>User-friendly:</strong> Navigate using keyboard or mouse. Easily change the themes for your website.</li><li><strong>Browser compatibility:</strong> Works on Google Chrome, Mozilla Firefox, Opera, Safari and even Internet Explorer.</li></ul>



<h3>Important Links</h3>



<ol><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Home (opens in a new tab)">Home</a></li><li><a rel="noreferrer noopener" aria-label="Documentation (opens in a new tab)" href="https://introjs.com/docs/" target="_blank">Documentation</a></li><li><a rel="noreferrer noopener" aria-label=" Download (opens in a new tab)" href="https://github.com/usablica/intro.js/releases" target="_blank">Download</a></li><li><a href="https://introjs.com/" target="_blank" rel="noreferrer noopener" aria-label="Demo (opens in a new tab)">Demo</a></li><li><a href="https://github.com/usablica/intro.js" target="_blank" rel="noreferrer noopener" aria-label="Github (opens in a new tab)">Github</a></li></ol>



<p><strong><em>Credit goes to Introjs@<a href="https://introjs.com/">https://introjs.com/</a></em></strong></p>

Intro.js is Step-by-step guide and feature introduction. It is open-source and free to use.



WHY USING INTRO.JS?



When new users visit your w...

Intro.js - Step-by-step guide and feature introduction - TCMHACK

Intro.js - Step-by-step guide and feature introduction

<p><strong>AlertifyJS</strong> is a javascript framework for developing pretty browser dialogs and notifications.</p>



<h2>Features</h2>



<h3>Feature-rich</h3>



<p>Packed with awesome features! Modal and Modelss view modes, Move, Resize and more!</p>



<h3>&nbsp;Extensible</h3>



<p>Extend existing dialogs, or create your own! using AlertifyJS is very straightforward.</p>



<h3>&nbsp;Unobtrusive notifications</h3>



<p>Unobtrusive notification messages can be used to give feedback to users.</p>



<h3>&nbsp;Themeable</h3>



<p>Three themes right out-of-the-box (AlertifyJS, Semantic and Bootstrap). <a href="https://alertifyjs.com/examples.html#semantic" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">view example</a></p>



<h3>&nbsp;Responsive</h3>



<p>Whether you use a desktop, laptop, tablet or mobile device. Have no worries!</p>



<h3>&nbsp;i18n and RTL Support</h3>



<p>Different language or a right-to-left layout! AlertifyJS got you covered. <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/examples.html#RTL" target="_blank">view example</a></p>



<p><strong>AlertifyJS not only provides a replacement for default browser dialogs, it makes it super easy to create your own!</strong></p>



<pre class="wp-block-code"><code>if(!alertify.myAlert){
  //define a new dialog
  alertify.dialog('myAlert',function(){
    return{
      main:function(message){
        this.message = message;
      },
      setup:function(){
          return { 
            buttons:&#91;{text: "cool!", key:27/*Esc*/}],
            focus: { element:0 }
          };
      },
      prepare:function(){
        this.setContent(this.message);
      }
  }});
}
//launch it.
alertify.myAlert("Browser dialogs made easy!");</code></pre>



<h4><strong>Let's Start</strong></h4>



<ul><li><a rel="noreferrer noopener" aria-label="Getting Started (opens in a new tab)" href="https://alertifyjs.com/guide.html" target="_blank">Getting Started</a></li><li>Components<ul><li><a rel="noreferrer noopener" aria-label="Alert (opens in a new tab)" href="https://alertifyjs.com/alert.html" target="_blank">Alert</a></li><li><a rel="noreferrer noopener" aria-label="Confirm (opens in a new tab)" href="https://alertifyjs.com/confirm.html" target="_blank">Confirm</a></li><li><a rel="noreferrer noopener" aria-label="Prompt (opens in a new tab)" href="https://alertifyjs.com/prompt.html" target="_blank">Prompt</a></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/notifier.html" target="_blank">Notifier</a></li></ul></li><li><a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://alertifyjs.com/factory.html" target="_blank">Dialogs Factory</a></li><li><a rel="noreferrer noopener" aria-label="Examples (opens in a new tab)" href="https://alertifyjs.com/examples.html" target="_blank">Examples</a></li><li><a href="https://alertifyjs.com/tutorials.html" target="_blank" rel="noreferrer noopener" aria-label="Tutorials (opens in a new tab)">Tutorials</a></li></ul>



<p><em><strong>Credit goes to AlertifyJS@<a href="https://alertifyjs.com/">https://alertifyjs.com/</a></strong></em></p>

AlertifyJS is a javascript framework for developing pretty browser dialogs and notifications.



Features



Feature-rich



Packed with awesome ...

AlertifyJS - Browser dialogs made easy! - TCMHACK

AlertifyJS - Browser dialogs made easy!

<p><strong><a href="https://sweetalert.js.org/" target="_blank" rel="noreferrer noopener" aria-label="SweetAlert (opens in a new tab)">SweetAlert</a></strong> A beautiful replacement for JavaScript's "alert".</p>

<h2>Installation</h2>

<pre class="wp-block-code"><code>npm install --save sweetalert</code></pre>

<h2>Usage</h2>

<pre class="wp-block-code"><code>import swal from 'sweetalert';
swal("Hello world!");</code></pre>

<h2>Upgrading from 1.X</h2>

<p>Many improvements and breaking changes have been introduced in the 2.0 release. Make sure you read the&nbsp;<a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">upgrade guide</a>&nbsp;to avoid nasty suprises!</p>

<h2>Guides</h2>

<ul>
<li><a href="https://sweetalert.js.org/guides/#installation" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Installation</a></li>
<li><a href="https://sweetalert.js.org/guides/#getting-started" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Getting started</a></li>
<li><a href="https://sweetalert.js.org/guides/#advanced-examples" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Advanced examples</a></li>
<li><a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Using with libraries</a></li>
<li><a href="https://sweetalert.js.org/guides/#upgrading-from-1x" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Upgrading from 1.X</a></li>
</ul>

<h2>Documentation</h2>

<ul>
<li><a href="https://sweetalert.js.org/docs/#configuration" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Configuration</a></li>
<li><a href="https://sweetalert.js.org/docs/#methods" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Methods</a></li>
<li><a href="https://sweetalert.js.org/docs/#theming" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Theming</a></li>
</ul>

<h2>Examples</h2>

<h3>An error message:</h3>

<pre class="wp-block-preformatted">swal("Oops!", "Something went wrong!", "error");</pre>

<h3>A warning message, with a function attached to the confirm message:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  title: "Are you sure?",
  text: "Are you sure that you want to leave this page?",
  icon: "warning",
  dangerMode: true,
})
.then(willDelete =&gt; {
  if (willDelete) {
    swal("Deleted!", "Your imaginary file has been deleted!", "success");
  }
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willDelete = await swal({
  title: "Are you sure?",
  text: "Are you sure that you want to delete this file?",
  icon: "warning",
  dangerMode: true,
});

if (willDelete) {
  swal("Deleted!", "Your imaginary file has been deleted!", "success");
}</pre>

<h3>A prompt modal, where the user's input is logged:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal("Type something:", {
  content: "input",
})
.then((value) =&gt; {
  swal(`You typed: NULL`);
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const value = await swal("Type something:", {
  content: "input",
});

swal(`You typed: NULL`);</pre>

<h3>In combination with Fetch:</h3>

<ul>
<li>Using promises:</li>
</ul>

<pre class="wp-block-preformatted">swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
})
.then(willSearch =&gt; {
  if (willSearch) {
    return fetch("http://pokeapi.co/api/v2/pokemon/1");
  }
})
.then(result =&gt; result.json())
.then(json =&gt; console.log(json))
.catch(err =&gt; {
  swal("Oops!", "Seems like we couldn't fetch the info", "error");
});</pre>

<ul>
<li>Using async/await:</li>
</ul>

<pre class="wp-block-preformatted">const willSearch = await swal({
  text: "Wanna log some information about Bulbasaur?",
  button: {
    text: "Search!",
    closeModal: false,
  },
});

if (willSearch) {
  try {
    const result = await fetch("http://pokeapi.co/api/v2/pokemon/1");
    const json = await result.json();
    console.log(json);
  } catch (err) {
    swal("Oops!", "Seems like we couldn't fetch the info", "error");
  }
}</pre>

<h2>Using with React</h2>

<p>SweetAlert has tools for&nbsp;<a href="https://sweetalert.js.org/guides/#using-with-libraries" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">integrating with your favourite rendering library.</a></p>

<p>If you're using React, you can install&nbsp;<a href="https://www.npmjs.com/package/@sweetalert/with-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">SweetAlert with React</a>&nbsp;in addition to the main library, and easily add React components to your alerts like this:</p>

<pre class="wp-block-preformatted">import React from 'react'
import swal from '@sweetalert/with-react'

swal(
  &lt;div&gt;
    &lt;h1&gt;Hello world!&lt;/h1&gt;
    &lt;p&gt;
      This is now rendered with JSX!
    &lt;/p&gt;
  &lt;/div&gt;
)</pre>

<p><a href="https://sweetalert.js.org/guides/#using-react" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Read more about integrating with React</a></p>

<p><strong><em>Credit goes to SweetAlerts@<a href="https://sweetalert.js.org/">https://sweetalert.js.org/</a></em></strong></p>

SweetAlert A beautiful replacement for JavaScript's "alert".

SweetAlert - A beautiful replacement for JavaScript's "alert" - TCMHACK

SweetAlert - A beautiful replacement for JavaScript's "alert"

<p><strong>Paper.js</strong> is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Object Model and a lot of powerful functionality to create and work with vector graphics and bezier curves, all neatly wrapped up in a well designed, consistent and clean programming interface.</p>

<p>Paper.js is based on and largely compatible with&nbsp;<a href="http://scriptographer.org/" target="_blank" rel="noreferrer noopener">Scriptographer</a>, a scripting environment for Adobe Illustrator with an active community of scripters and more than 10 years of development.</p>

<p>Paper.js is easy to learn for beginners and has lots to master for intermediate and advanced users.</p>

<p>Paper.js is developed by&nbsp;<a href="http://lehni.org/" target="_blank" rel="noreferrer noopener">J&uuml;rg Lehni</a>&nbsp;&amp;&nbsp;<a href="http://jonathanpuckey.com/" target="_blank" rel="noreferrer noopener">Jonathan Puckey</a>, and distributed under the permissive MIT License.</p>
<h3>Getting Started</h3>
<ul>
<li>First of all, take a look at some of paperjs <a href="http://paperjs.org/examples/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">examples</a>.</li>
<li><a href="http://paperjs.org/download/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Download</a>&nbsp;Paper.js or check out the latest version from paperjs&nbsp;<a href="http://github.com/paperjs/paper.js" target="_blank" rel="noreferrer noopener">Github Repository</a>.</li>
<li>Want to learn Paper.js? Why not start now with one of our <a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Tutorials</a>.</li>
<li>If you have any questions or comments, please join the paperjs <a href="http://groups.google.com/group/paperjs" target="_blank" rel="noreferrer noopener">mailing list</a>.</li>
<li>To stay up to date, <a href="http://twitter.com/paperjs" target="_blank" rel="noreferrer noopener">follow paperjs on Twitter</a>.</li>
</ul>
<h3>Overview</h3>

<p>Paper.js is not simply a wrapper around the Canvas, it offers much more:</p>

<ul>
<li>A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.</li>
<li>The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.</li>
<li>A well designed and battle hardened Application Programming Interface (API).</li>
<li>PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.</li>
<li>There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>,&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/rectangle" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Rectangle</a>. The manipulation of&nbsp;<a href="http://paperjs.org/reference/point" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Point</a>&nbsp;and&nbsp;<a href="http://paperjs.org/reference/size" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Size</a>&nbsp;objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.</li>
<li>Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.</li>
<li>Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.</li>
<li>Smoothen curves, and simplify path segments by fitting curves through points.</li>
<li>Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.</li>
<li>Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average &amp; negation.</li>
</ul>

<p>Read paperjs&nbsp;<a href="http://paperjs.org/tutorials/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">tutorials</a> to learn more about the features of Paper.js.</p>
<h3>Browser Support</h3>

<p>Paper.js is aimed at modern browsers with support for the Canvas object and EcmaScript 5. Even though in theory it is possible to write code that works in older browsers (Yes Explorer 8 and below, we are looking at you!), paperjs currently do not support them out of the box. Let&rsquo;s go forward!</p>

<p><strong><em>Credit goes to PaperJS@<a href="http://paperjs.org/">http://paperjs.org/</a></em></strong></p>

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas. It offers a clean Scene Graph / Document Obj...