Wondering what‚Äôs next for npm?Check out our public roadmap! ¬Ľ

    tappify

    1.0.8¬†‚Äʬ†Public¬†‚Äʬ†Published

    Tappify.js

    A lightweight zero dependency React.js library to handle the client's pointer. Easily detect client cursor type and hide/show html or perform custom logic!

    Install

    npm i tappify

    Getting started

    Basic hide/show

    import Tappify from "tappify";
     
    function myComponent() {
      return <>
        <Tappify.Finger>
    ¬†¬†¬†¬†¬†¬†Client¬†is¬†using¬†finger¬†ūüĎȬ†*tap¬†tap*
        </Tappify.Finger>
     
        <Tappify.Cursor>
    ¬†¬†¬†¬†¬†¬†Client¬†is¬†using¬†mouse¬†cursor¬†ūüĖĪÔłŹ¬†*click¬†click*
        </Tappify.Cursor>
      </>
    }

    Get the current pointer type

    const isCursor = Tappify.isCursor(); // will be true if the pointer is mouse cursor. False if it's finger

    Subscribe to pointer change

    const unsubscribe = Tappify.subscribe(isCursor => {
     
      if (isCursor) console.log("This client is now using a cursor");
      else console.log("This client is now using a touch screen");
      
    });
     
    unsubscribe(); // it's strongly recommended to unsubscribe when component unmounts to avoid memory leaks

    Live demo

    Why Tappify?

    With growing usage of touch screens on computer devices Tappify makes it seamless and easy to detect when user goes in or out of touch mode. In addition tappify provides an easy to use switch case scenario to handle different HTML elements depending on what pointer the client is using.

    Tappify is completely event driven, that means no clocks/setintervals/requestAnimationFrame making it very preferment. It makes use of css's native @media condition to avoid any edge case bugs that JavaScript solutions might invoke.

    How Tappify works

    Tappify uses @media pointer rule to determine the pointer type. If a pointer change is detected the pointerChange event will be dispatched on window and thereafter notifying subscribers and updating the <Tappify.Cursor> and <Tappify.Finger> components.

    Found an issue?

    Please open a new issue on the Github repository

    Want to contribute?

    Simply create a new pull request on the pull requests tab.

    Browser support

    Tappify will work on all modern browsers. Tappify will not work on IE.

    Install

    npm i tappify

    DownloadsWeekly Downloads

    4

    Version

    1.0.8

    License

    ISC

    Unpacked Size

    6.33 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar