kitzo

A lightweight library of Vanilla js and React js

Vanilla js

• Copy on click
• Tooltip on mouseover
• Ripple effect on mousedown
• Debounce function
• Hover clip-path effect

React js

• React Toast notifications
• Tooltip wrapper component

Install

npm i kitzo

or

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/kitzo.umd.min.js"></script>

Vanilla: Attach this script tag in the html head tag and you are good to go.

API links

• Vanilla: copy, Tooltip, Ripple, Debounce, Clippath, Get type
• React: Toast, Tooltip

Vanilla APIs

// NPM usage
import kitzo from 'kitzo';

kitzo.copy();
kitzo.tooltip();
kitzo.ripple();
kitzo.debounce();
kitzo.clippath();
kitzo.getType();

Use a modern build tool. vite - recommended

Copy API:

kitzo.copy(doc);

Copy functionality on call.

Tooltip API:

kitzo.tooltip(selectors | element | NodeList, {
  tooltip: string,
  direction: 'top' | 'right' | 'bottom' | 'left',
  arrow: 'on' | 'off',
  offset: number,
  customClass: string,
  style: object,
});

Attach minimal tooltips to buttons for clean, helpful hover hints.

Ripple API:

kitzo.ripple(selectors | element | NodeList, {
  opacity: number,
  duration: number,
  color: string,
  size: number,
});

Adds a lightweight, clean ripple effect to your elements on click.

Debounce API:

kitzo.debounce(callback, delayInMilliseconds);

// Log only after typing stops for 500ms
const logSearch = kitzo.debounce((text) => {
  console.log('Searching for:', text);
}, 500);

// Attach to input
document.querySelector('#search').addEventListener('input', (e) => {
  logSearch(e.target.value);
});

Debounce on every call of function.

Clippath API:

kitzo.clippath(selectors | element | NodeList, {
  textOption: null | { selector: string, value: string | number },
  clippathSize: string | number,
  smooth: boolean,
  class: string,
  style: object,
});

TypeCheck API:

kitzo.getType(type);

const data = [];
console.log(kitzo.getType(data)); // 'array'

React

Install

npm i kitzo

React APIs

import { ToastContainer, toast, Tooltip, ... } from 'kitzo/react';

Toast API:

import { toast } from 'kitzo/react';

toast.success('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });
toast.error('toast message', { duration: 2000, style: {}, showIcon: true, position: 'top-center' });

toast.promise(
  promise(), // call a function that returns promise
  {
    loading: 'Saving...',
    success: 'Saved' | (response) => 'Saved',
    error: 'Error occured' | (error) => 'Error occured',
  },
  { duration: 2000, style: {}, showIcon: true, position: 'top-center' },
);

// JSX element
toast.custom(<MyCustomComponent />, { duration: 2000, position: 'top-center' });

// Function that receives a dismiss handler
toast.custom((dismiss) => (
  <div>
    <span>Custom toast message</span>
    <button onClick={dismiss}>Close</button>
  </div>
), { duration: 3000 | Infinity });

// (and optionally)
toast.custom("string");

React Toast API Usage

import { ToastContainer, toast } from 'kitzo/react';

function App() {
  function fakePromise() {
    return new Promise((resolved, rejected) => {
      setTimeout(() => {
        Math.random() > 0.5 ? resolved('resolved') : rejected('rejected');
      }, 2000);
    });
  }

  function promiseToast() {
    toast.promise(
      fakePromise(),
      {
        loading: 'Saving data...',
        success: 'Data saved',
        error: 'Failed saving data',
      },
      { duration: 2500, position: 'top-center' },
    );
  }

  function customToast() {
    toast.custom(
      (dismiss) => (
        <div>
          <span>Funtion that return jsx</span>
          <button onClick={dismiss}>Close</button>
        </div>
      ),
      {
        duration: 2000,
        position: 'top-center',
      },
    );
  }

  return (
    <div>
      <button onClick={() => toast.success('✅ Success toast message')}>Succes</button>
      <button onClick={() => toast.error('❌ Error toast message')}>Error</button>
      <button onClick={promiseToast}>Promise</button>
      <button onClick={customToast}>Custom Toast</button>

      {/* Toast container must needed */}
      <ToastContainer />
    </div>
  );
}

Each toast can have its own position. default position is top-center.

React Tooltip API:

import { Tooltip } from 'kitzo/react';

function App() {
  return (
    <div>
      <h1>Tooltip api</h1>

      <div>
        <Tooltip
          content="Tooltip"
          tooltipOptions={{
            offset: 10,
            smartHover: true,
          }}
          animate={{
            duration: 120,
            startDelay: 400,
            endDelay: 50,
          }}
          style={{
            '--arrow-size': 6,
            '--arrow-color': 'red'
          }}
        >
          <button>Hover me</button>
        </Tooltip>
      </div>
    </div>
  );
}

You can provide your own custom jsx element as content. e.g. content={<div>Custom tooltip</div>}