DEV Community

loading...

iposcursor an iPadOS Cursor for the web

josesaranda profile image José Sánchez Aranda Updated on ・2 min read

Hi guys, as I told you in the previous post I built a small library to create an iPadOS 13.4 Cursor for the web. Today I'm so proud to tell you that it library becomes to be more seriously and allows you to create different cursors with different customisations.

NPM

Nowadays is obviously that a good library must have in npmjs repositories. And I'm so proud to tell you that it is. Here at https://www.npmjs.com/package/iposcursor you can see how to install and how to use this library for your project. I'm very excited because this project works in Browser (umd version) and ES and TS modules.

Installation

From NPM

npm install iposcursor --save

From CDN

<!-- Include anywhere inside head tag -->
<link rel="stylesheet" href="https://unpkg.com/iposcursor/dist/css/iposcursor.min.css">
<!-- Include at the end of body tag -->
<script src="https://unpkg.com/iposcursor/dist/iposcursor.min.js"></script>

Usage

ES and TS modules

import { IposCursor, create } from 'iposcursor';

let cursor = new IposCursor({element : 'elementId'});
cursor.suscribe();
// or
let cursor = create({element : 'elementId'});
cursor.suscribe();

Browser

<html>
  <head>
    <!-- your awesomes styles, meta, etc -->
    <link rel="stylesheet" href="node_modules/iposcursor/css/iposcursor.min.css">
  </head>
  <body>
  <!-- your awesome code -->
  <!-- ... -->
  <script src="node_modules/iposcursor/iposcursor.min.js"></script>
  <script>
    let cursor = iposcursor.create({element : 'elementId'});
    cursor.suscribe();
  </script>
  </body>
<html>

Demos

I built two examples that you can find in example directory https://github.com/josesaranda/iposcursor/tree/master/example one of them is writing using browser only and the other one using parcel such as build tool. You can run both example if you clone the repo in your machine simply typing:

git clone https://github.com/josesaranda/iposcursor
cd iposcursor
npm install
npm run build
npm run demo

Also you can install node modules, build library and go to example/umd directory and double click index.html will show you a browser usage of this library.

If you want to see it in action without do anything you can see codepen implementation here.

That's all

Yes, that's all. This becomes to be a more seriously library step by step. I'll implement more functionality in future versions. And I hope you like it! Thanks.

Discussion

pic
Editor guide