open-index/open-npm huggingface dataset:
npm package: @jwooky/base62-uuid
Description: Base62 encoder / decoder and UUID generator (RFC4122)
Author: Jason Tobias
Latest version: 1.0.1

# @jwooky/base62-uuid

[![test_status](
https://github.com/jwooky/base62-uuid/actions/workflows/build-test.yml/badge.svg)](https://github.com/jwooky/base62-uuid/actions/workflows/build-test.yml/badge.svg)
[![coverage_status](https://codecov.io/gh/jwooky/base62-uuid/branch/master/graph/badge.svg?token=ZIRRO8TIO2)](https://codecov.io/gh/jwooky/base62-uuid)

base62-uuid generates short URL safe identifiers that can be used for encoding / decoding standard UUID strings.

## Getting Started

    npm install @jwooky/base62-uuid

## Example Usage:

    import Base62UUID from '@jwooky/base62-uuid';
    // or for CommonJS
    const Base62UUID = require('@jwooky/base62-uuid')

    const base62 = new Base62UUID()

    // Generate a random Base62 string
    const randB62 = base62.v4()
    console.log(randB62)

    // Generate a random UUID string
    const randUUID = base62.uuid()
    console.log(randUUID)

    // Encode existing UUID to Base62 string
    const uuid = base62.uuid()
    const randUUID = base62.encode(uuid)
    console.log(randUUID)

    // Decode Base62 value to UUID string
    const b62Str = base62.v4()
    const randUUID = base62.decode(b62str)
    console.log(randUUID)


## Running Tests

    npm test 

## Running Example Scripts

The example script `examples/example.ts` provides examples for using each UUID version

  * Generating random Base62 strings 
  * Generating UUID with specific version
  * Encoding UUID to a Base62 string
  * Decoding Base62 string back to UUID

Execute the following comand to

    npm run example
npm package: @jworkshop/animator
Description: An instance class which manages animations by hooking into requestAnimationFrame (or setInterval if not available).
Author: jworkshop
Latest version: 0.0.5

# animator

An instance class which manages animations by hooking into requestAnimationFrame (or setInterval if not available).

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/animator.svg
[npm-url]: http://npmjs.org/package/@jworkshop/animator
[travis-image]: https://img.shields.io/travis/JWorkshop/animator.svg
[travis-url]: https://travis-ci.org/JWorkshop/animator
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/animator.svg
[download-url]: https://npmjs.org/package/@jworkshop/animator

## install

[![NPM](https://nodei.co/npm/@jworkshop/animator.png)](https://nodei.co/npm/@jworkshop/animator)

## Usage

```javascript
import Animator from "@jworkshop/animator";

/* Create an instance of an animator. */
let animator = new Animator();

let animateHandler = timeDiff => { ... };

/** Bind an event handler to the animate event. */
animator.add(animateHandler);

/** Unbind an event handler from the animate event. */
animator.remove(animateHandler);

/** Unbind all event handlers from the animate event. */
animator.clear();

/** Set a specific frame rate for the animation. */
animator.setFPS(fps);

/** Start the animation loop. */
animator.start();

/** Pause the animation loop. */
animator.pause();

/** Resume the animation loop. */
animator.resume();

let pauseHandler = () => { ... };

/** Bind an event handler to the pause event. */
animator.onPause(pauseHandler);

/** Unbind an event handler from the pause event. */
animator.removePause(pauseHandler);

/** Unbind all event handlers from the pause event. */
animator.clearPause();

let resumeHandler = () => { ... };

/** Bind an event handler to the resume event. */
animator.onResume(resumeHandler);

/** Unbind an event handler from the resume event. */
animator.removeResume(resumeHandler);

/** Unbind all event handlers from the resume event. */
animator.clearResume();
```
npm package: @jworkshop/canvas
Description: A canvas react UI component.
Author: jworkshop
Latest version: 0.0.8

# canvas

A canvas react UI component.
It hooks into resize on browser and itself to prevent the canvas from stretching.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/canvas.svg
[npm-url]: http://npmjs.org/package/@jworkshop/canvas
[travis-image]: https://img.shields.io/travis/JWorkshop/canvas.svg
[travis-url]: https://travis-ci.org/JWorkshop/canvas
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/canvas.svg
[download-url]: https://npmjs.org/package/@jworkshop/canvas

## install

[![NPM](https://nodei.co/npm/@jworkshop/canvas.png)](https://nodei.co/npm/@jworkshop/canvas)

## Usage

```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";

import Canvas from "@jworkshop/canvas";

import "./style.css";

class Example extends Component {
  constructor(props) {
    super(props);

    this.resizeHandler = this.resizeHandler.bind(this);
  }

  someFunction() {
    const canvas = this.myCanvas;

    /** Retrieve the canvas react component. */
    canvas.getCanvasElement();

    /** Get the width of the canvas react component. */
    canvas.getCanvasWidth();

    /** Get the width of the canvas react component. */
    canvas.getCanvasHeight();

    /** Get the context of the canvas. */
    canvas.getContext();

    /** Get the image data of the canvas with a give area. */
    canvas.getImageData(startX, startY, endX, endY);
  }

  resizeHandler(width, height) {
    // Do you stuff
  }

  render() {

    return (
      <Canvas
        ref={myCanvas => this.myCanvas = myCanvas}
        className="className"
        style={ ... }
        canvasClassName="canvasClassName"
        canvasStyle={ ... }
        onResize={this.resizeHandler}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));
```
npm package: @jworkshop/canvasanimator
Description: A canvas react UI component integrated with animation feature.
Author: jworkshop
Latest version: 0.0.5

# canvasanimator

A canvas react UI component integrated with animation feature.
It is an extension of [canvas](https://nodei.co/npm/@jworkshop/canvas),
integrated with an [animator](https://nodei.co/npm/@jworkshop/animator).

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/canvasanimator.svg
[npm-url]: http://npmjs.org/package/@jworkshop/canvasanimator
[travis-image]: https://img.shields.io/travis/JWorkshop/canvasanimator.svg
[travis-url]: https://travis-ci.org/JWorkshop/canvasanimator
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/canvasanimator.svg
[download-url]: https://npmjs.org/package/@jworkshop/canvasanimator

## install

[![NPM](https://nodei.co/npm/@jworkshop/canvasanimator.png)](https://nodei.co/npm/@jworkshop/canvasanimator)

## Usage

```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";

import CanvasAnimator from "@jworkshop/canvasanimator";

import "./style.css";

class Example extends Component {
  constructor(props) {
    super(props);

    this.resizeHandler = this.resizeHandler.bind(this);
    this.animate = this.animate.bind(this);
    this.pauseHandler = this.pauseHandler.bind(this);
    this.resumeHandler = this.resumeHandler.bind(this);
  }

  someFunction() {
    const canvas = this.myCanvas;

    /** Retrieve the canvas react component. */
    canvas.getCanvasElement();

    /** Get the width of the canvas react component. */
    canvas.getCanvasWidth();

    /** Get the width of the canvas react component. */
    canvas.getCanvasHeight();

    /** Get the context of the canvas. */
    canvas.getContext();

    /** Get the image data of the canvas with a give area. */
    canvas.getImageData(startX, startY, endX, endY);

    /** Start the animation. */
    canvas.start();

    /** Pause the animation. */
    canvas.pause();

    /** Resume the animation. */
    canvas.resume();
  }

  resizeHandler(width, height) {
    // Do you stuff
  }

  animate(context, width, height, timeDiff) {
    // Do you stuff
  }

  pauseHandler() {
    // Do you stuff
  }

  resumeHandler() {
    // Do you stuff
  }

  render() {

    return (
      <CanvasAnimator
        ref={myCanvas => this.myCanvas = myCanvas}
        className="className"
        style={ ... }
        canvasClassName="canvasClassName"
        canvasStyle={ ... }
        onResize={this.resizeHandler}
        animate={this.animate}
        onPause={this.pauseHandler}
        onResume={this.resumeHandler}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));
```
npm package: @jworkshop/canvasasciifier
Description: A <pre> text React component which renders ascii from a canvas.
Author: jworkshop
Latest version: 0.0.6

# canvasasciifier

A \<pre\> text React component which renders ascii from a canvas.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/canvasasciifier.svg
[npm-url]: http://npmjs.org/package/@jworkshop/canvasasciifier
[travis-image]: https://img.shields.io/travis/JWorkshop/canvasasciifier.svg
[travis-url]: https://travis-ci.org/JWorkshop/canvasasciifier
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/canvasasciifier.svg
[download-url]: https://npmjs.org/package/@jworkshop/canvasasciifier

## install

[![NPM](https://nodei.co/npm/@jworkshop/canvasasciifier.png)](https://nodei.co/npm/@jworkshop/canvasasciifier)

## Usage

```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";

import CanvasAsciifier from "@jworkshop/canvasasciifier";

import "./style.css";

class Example extends Component {
  someFunction() {
    const { myCanvas, myAsciifier } = this;

    /** Get the pre element with the generated ascii text. */
    myAsciifier.getTextElement();

    /** Update the pre element with generated ascii text. */
    asciifier.update(myCanvas);

    /** Generate ascii text from the canvas image data. */
    let asciiCode = myAsciifier.generateAsciiCode(myCanvas);
  }

  render() {

    return (
      <canvas
        ref={myCanvas => this.myCanvas = myCanvas}
      />
      <CanvasAsciifier
        ref={myAsciifier => this.myAsciifier = myAsciifier}
        className="className"
        style={ ... }
        textClassName="textClassName"
        textStyle={ ... }
        invert={true}
        asciiData={[" ", ".", ",", ";", "|", "*", "%", "@", "X", "#", "W", "M"]}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));
```
npm package: @jworkshop/colorpicker
Description: A color picker react UI component.
Author: jworkshop
Latest version: 0.0.5

# colorpicker

A color picker react UI component.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/colorpicker.svg
[npm-url]: http://npmjs.org/package/@jworkshop/colorpicker
[travis-image]: https://img.shields.io/travis/JWorkshop/colorpicker.svg
[travis-url]: https://travis-ci.org/JWorkshop/colorpicker
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/colorpicker.svg
[download-url]: https://npmjs.org/package/@jworkshop/colorpicker

## install

[![NPM](https://nodei.co/npm/@jworkshop/colorpicker.png)](https://nodei.co/npm/@jworkshop/colorpicker)

## Usage

```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";

import ColorPicker from "@jworkshop/colorpicker";

import "./style.css";

class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      color: { r: 125, g: 125, b: 125, a: 1 }
    };
  }

  render() {
    const { color } = this.state;

    return (
      <ColorPicker
        className="example"
        style: { ... },
        paletteClassName="paletteClassName"
        paletteStyle: { ... },
        dialogWidth={200}
        dialogHeight={190}
        color={color}
        onChange={value => this.setState({ color: value })}
      />
    );
  }
}

ReactDOM.render(<Test />, document.getElementById("root"));
```
npm package: @jworkshop/keyboard
Description: An instance class which hooks into keyup and keydown, and keeps track of all the key pressed.
Author: jworkshop
Latest version: 0.0.5

# keyboard

An instance class which hooks into keyup and keydown, and keeps track of all the key pressed.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/keyboard.svg
[npm-url]: http://npmjs.org/package/@jworkshop/keyboard
[travis-image]: https://img.shields.io/travis/JWorkshop/keyboard.svg
[travis-url]: https://travis-ci.org/JWorkshop/keyboard
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/keyboard.svg
[download-url]: https://npmjs.org/package/@jworkshop/keyboard

## install

[![NPM](https://nodei.co/npm/@jworkshop/keyboard.png)](https://nodei.co/npm/@jworkshop/keyboard)

## Usage

```javascript
import Keyboard, { Keys } from "@jworkshop/keyboard";

/* Get the container for the keyboard. */
let container = document.getElementById("container");

/* Create a keyboard instance, with the element as its container.
 * This is to allow the keyboard to monitor all key events from the container. */
let keyboard = new Keyboard(container);

/** Append the keyboard to the a DOM element and event handlers to it. */
keyboard.attach(container);

/** Detach the keyboard from DOM element and event handlers from it. */
keyboard.detach();

/** Toggle value for keyboard prevent default on all events. */
keyboard.setPreventDefault(preventDefault);

/** Toggle value for keyboard skipping further key down events. */
keyboard.setPreventHoldDownEvent(preventHoldDownEvent);

let keyDownHandler = event => { ... };

/** Bind an event handler to the key down event. */
keyboard.onKeyDown(keyDownHandler);

/** Unbind an event handler to the key down event. */
keyboard.removeKeyDown(keyDownHandler);

/** Unbind all event handlers from the key down event. */
keyboard.clearKeyDown();

let keyUpHandler = event => { ... };

/** Bind an event handler to the key up event. */
keyboard.onKeyUp(keyUpHandler);

/** Unbind an event handler to the key up event. */
keyboard.removeKeyUp(keyUpHandler);

/** Unbind all event handlers from the key up event. */
keyboard.clearKeyUp();

/** Checks if a given keyCode has been pressed. */
keyboard.hasKeyPressed(keyCode);

/** You can use key constants as keyCodes e.g.: */
keyboard.hasKeyPressed(Keys.ENTER);

/** Get the last keyCode that has been pressed. */
keyboard.getLastKeyPressed();
```
npm package: @jworkshop/loadimage
Description: Load image(s) asynchronously.
Author: jworkshop
Latest version: 0.0.1
Deprecated: redundant

# loadimage

Load image(s) asynchronously.
Returns `null` if image fails to load.

[![NPM version][npm-image]][npm-url]
[![build status][travis-image]][travis-url]
[![node version][node-image]][node-url]
[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/@jworkshop/loadimage.svg
[npm-url]: http://npmjs.org/package/@jworkshop/loadimage
[travis-image]: https://img.shields.io/travis/JWorkshop/loadimage.svg
[travis-url]: https://travis-ci.org/JWorkshop/loadimage
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg
[node-url]: http://nodejs.org/download/
[download-image]: https://img.shields.io/npm/dm/@jworkshop/loadimage.svg
[download-url]: https://npmjs.org/package/@jworkshop/loadimage

## install

[![NPM](https://nodei.co/npm/@jworkshop/loadimage.png)](https://nodei.co/npm/@jworkshop/loadimage)

## Usage

```javascript
import loadImage from "@jworkshop/loadImage";

let yourImage = loadImage("<your image URL>");

let imageURLs = [ ... ];

let yourImages = loadImage(imageURLs);
```