<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><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...

Paper.js — The Swiss Army Knife of Vector Graphics Scripting - TCMHACK

Paper.js — The Swiss Army Knife of Vector Graphics Scripting

If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your needs!

In this post, we will talk about top 5 best open source&nbsp;<a href="/category/javascript/" target="_blank" rel="nofollow noopener noreferrer">JavaScript</a>&nbsp;chart libraries. Every site and dashboard are incomplete without charts and graphs so it is very important to find the right chart library for our application. The following libraries will help you to create customizable and beautiful charts for your application.
<h3 id="d3js-data-driven-documents">D3.js — Data-Driven Documents</h3>
D3.js is an open source JavaScript library used for manipulating documents based on user data. It is a powerful tool which gives life to the data with the help of HTML, SVG, and CSS. D3 allows developers to bind arbitrary data to a DOM and then it applies the data-driven transformation to the DOM.

For Example: Consider an array of numbers, You can use it to generate an HTML table or you can use the same data to generate interactive&nbsp;bar or pie charts.

Official Website:&nbsp;<a href="https://d3js.org/" target="_blank" rel="nofollow noopener noreferrer">https://d3js.org/</a>
<h3>Google Charts</h3>
Google Charts is an open source chart library which is powerful and very simple to use. It has many interactive charts to display and render live data. It has a rich chart gallery that include options like pie charts, bar charts,&nbsp;Scatter Charts, donut charts, etc. Moreover, various customization options are available with the charts.

It also has charts like Histograms, timelines, trend lines, Sankey Diagrams, etc.

Official Website:&nbsp;<a href="https://google-developers.appspot.com/chart/" target="_blank" rel="nofollow noopener noreferrer">https://google-developers.appspot.com/chart/&nbsp;</a>
<h3>Chart.js</h3>
Chart.js is a community maintained chart library and by using it we can create responsive charts for your website. Using it we can generate mixed charts and it has great rendering capacity in modern browsers. It has very good documentation and samples available.

<a href="http://jtblin.github.io/angular-chart.js/" target="_blank" rel="nofollow noopener noreferrer">Angular Chart</a>&nbsp;is built on top of the Chart.js library, and for Angular projects it will be really easy to implement Angular charts.

Official Website:&nbsp;<a href="http://www.chartjs.org/" target="_blank" rel="nofollow noopener noreferrer">http://www.chartjs.org/</a>
<h3>Chartist.js</h3>
Chartist.js is also an open source JavaScript library similar to Chart.js. It has&nbsp;rich and response charts available. Using it, we can generate SVG charts that are DPI independent. It has support for most of the modern browsers and good community support. It has support for some other technologies like Node, Angular, Jjava, Wordpress, Ember, React, and Meteor.

Official Website:&nbsp;<a href="http://gionkunz.github.io/chartist-js/" target="_blank" rel="nofollow noopener noreferrer">http://gionkunz.github.io/chartist-js/</a>
<h3>n3-charts</h3>
n3-charts is also an open source JavaScript chart library and it makes the life of the Angular developer easy. n3-charts is built on top of D3.js and AngularJS, hence it posses more powerful charts and it's easy to implement.

Official Website:&nbsp;<a href="http://n3-charts.github.io/line-chart/#/home" target="_blank" rel="nofollow noopener noreferrer">http://n3-charts.github.io/line-chart/#/home</a>

If you're working on a project that requires data visualization, check out these five great open source libraries and see which one fits your nee...