A Basic TypeScript Implementation of Xneko

06 September 2023
0
51

neko-ts

A simple fun addition to your website, a neko that follows your mouse around! (or just sits there if you don’t move your mouse)

Check out the demo here

Installation

npm install neko-ts

yarn add neko-ts

Usage

Simple usage

import { Neko, NekoSizeVariations } from "neko-ts";

let neko: Neko | null = null;

document.addEventListener("DOMContentLoaded", () => {
  neko = new Neko();
});

With options

import { Neko, NekoSizeVariations } from "neko-ts";

document.addEventListener("DOMContentLoaded", () => {
  neko = new Neko({
    nekoId: 1,
    nekoSize: NekoSizeVariations.SMALL,
    speed: 10,
    origin: {
      x: 500,
      y: 500,
    },
    parent: nekoContainer,
  });
});

React

import { Neko } from "neko-ts";

const neko = useRef<Neko>();

useEffect(() => {
  if (!neko.current) {
    neko.current = new Neko({
      origin: {
        x: 100,
        y: 100,
      },
    });
  }
  // React does not know when object properties change, so we have to manually force a re-render
}, [neko]);

Options

OptionTypeDefaultDescriptionnekoIdnumber0The id of the neko you want to use. data-neko="{id}"nekoSizeNekoSizeVariationsNekoSizeVariations.SMALLThe size of the neko.speednumber10The speed of the neko.origin{x: number, y: number}{x: 0, y: 0}The origin of the neko.parentHTMLElementdocument.bodyThe parent of the neko.

Methods and properties

MethodDescriptionsleep()Neko goes back to origin and stops following the cursorwake()Neko starts following the cursor againdestroy(id?: number)Destroys the neko with the given id, or tries to destroy neko of that instancesetSize(size: NekoSizeVariations)Sets the size of the neko.size: NekoSizeVariationsThe size of the neko.isAwake: booleanWhether the neko is awake or not.