Convert Figma logo to code with AI

robinparisi logotingle

⚑ 2kB vanilla modal plugin, no dependencies and easy-to-use

1,553
185
1,553
28

Top Related Projects

β­• Tiny javascript library for creating accessible modal dialogs

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. πŸ‡ΊπŸ‡¦

8,498

A positioning engine to make overlays, tooltips and dropdowns better

11,981

Tooltip, popover, dropdown, and menu library

Pure JavaScript library for better notification messages

Quick Overview

Tingle is a minimalist and easy-to-use modal plugin written in vanilla JavaScript. It provides a simple way to create customizable modal windows without any dependencies, making it lightweight and efficient for web developers.

Pros

  • Lightweight and dependency-free
  • Easy to use and customize
  • Responsive and mobile-friendly
  • Supports callbacks for various modal events

Cons

  • Limited built-in styling options
  • May require additional CSS for complex designs
  • No built-in support for multiple modals on the same page
  • Lacks advanced features like nested modals or modal groups

Code Examples

Creating a basic modal:

const modal = new tingle.modal();
modal.setContent('<h1>Hello, world!</h1>');
modal.open();

Adding buttons to the modal:

const modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2']
});

modal.setContent('<h1>Modal with buttons</h1>');

modal.addFooterBtn('Cancel', 'tingle-btn tingle-btn--primary', function() {
    modal.close();
});

modal.addFooterBtn('OK', 'tingle-btn tingle-btn--default', function() {
    alert('OK clicked!');
    modal.close();
});

modal.open();

Using callbacks:

const modal = new tingle.modal({
    onOpen: function() {
        console.log('Modal opened');
    },
    onClose: function() {
        console.log('Modal closed');
    }
});

modal.setContent('<p>This modal has callbacks</p>');
modal.open();

Getting Started

  1. Include the Tingle CSS and JavaScript files in your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.16.0/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.16.0/dist/tingle.min.js"></script>
  1. Create a new modal instance and use it in your JavaScript:
const modal = new tingle.modal();
modal.setContent('<h1>Hello, Tingle!</h1>');
modal.open();
  1. Customize the modal as needed using the available options and methods.

Competitor Comparisons

β­• Tiny javascript library for creating accessible modal dialogs

Pros of Micromodal

  • Lightweight and minimal, with a smaller file size (3.5KB vs 4KB for Tingle)
  • Supports multiple modal instances on a single page
  • Offers programmatic control for opening and closing modals

Cons of Micromodal

  • Less customization options out-of-the-box compared to Tingle
  • Requires more manual setup for styling and positioning
  • Limited built-in animation options

Code Comparison

Tingle:

var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2']
});

Micromodal:

MicroModal.init({
    openTrigger: 'data-custom-open',
    closeTrigger: 'data-custom-close',
    disableScroll: true,
    disableFocus: false,
    awaitOpenAnimation: false,
    awaitCloseAnimation: false
});

Both libraries offer easy-to-use modal functionality, but Micromodal focuses on simplicity and lightweight implementation, while Tingle provides more built-in customization options. Micromodal may require more custom CSS for advanced styling, whereas Tingle offers more out-of-the-box features for positioning and animations.

✨ A beautiful, responsive, highly customizable and accessible (WAI-ARIA) replacement for JavaScript's popup boxes. Zero dependencies. πŸ‡ΊπŸ‡¦

Pros of SweetAlert2

  • More feature-rich with a wider range of customization options
  • Larger community and more frequent updates
  • Built-in accessibility features and keyboard navigation

Cons of SweetAlert2

  • Larger file size, which may impact page load times
  • More complex API, potentially steeper learning curve
  • Dependency on Promise API (may require polyfills for older browsers)

Code Comparison

SweetAlert2:

Swal.fire({
  title: 'Are you sure?',
  text: "You won't be able to revert this!",
  icon: 'warning',
  showCancelButton: true,
  confirmButtonText: 'Yes, delete it!'
}).then((result) => {
  if (result.isConfirmed) {
    // Deletion logic here
  }
})

Tingle:

var modal = new tingle.modal({
  footer: true,
  stickyFooter: false,
  closeMethods: ['overlay', 'button', 'escape'],
  closeLabel: "Close"
});
modal.setContent('<h1>Are you sure?</h1><p>You won\'t be able to revert this!</p>');
modal.addFooterBtn('Yes, delete it!', 'tingle-btn tingle-btn--primary', function() {
  // Deletion logic here
  modal.close();
});
modal.open();

Both libraries offer modal functionality, but SweetAlert2 provides a more declarative API with built-in promise support, while Tingle offers a more imperative approach with greater control over modal structure.

8,498

A positioning engine to make overlays, tooltips and dropdowns better

Pros of Tether

  • More comprehensive positioning options, including pinning to multiple elements
  • Larger community and more frequent updates
  • Better support for complex layouts and responsive designs

Cons of Tether

  • Larger file size and potentially more complex to implement
  • May be overkill for simple modal or popup use cases
  • Requires more configuration to achieve basic functionality

Code Comparison

Tether:

new Tether({
  element: '#element-to-move',
  target: '#target-element',
  attachment: 'top left',
  targetAttachment: 'bottom left'
});

Tingle:

var modal = new tingle.modal({
  footer: true,
  stickyFooter: false,
  closeMethods: ['overlay', 'button', 'escape'],
  closeLabel: "Close"
});
modal.setContent('<h1>Hello world</h1>');
modal.open();

Summary

Tether is a more powerful and flexible positioning library, ideal for complex layouts and advanced use cases. It offers more control over element positioning but may be excessive for simple modal implementations.

Tingle, on the other hand, is specifically designed for creating modal windows with a simpler API. It's easier to set up for basic modal functionality but lacks the advanced positioning features of Tether.

Choose Tether for complex positioning needs and Tingle for straightforward modal implementations.

11,981

Tooltip, popover, dropdown, and menu library

Pros of Tippyjs

  • More comprehensive tooltip and popover solution with extensive customization options
  • Larger community and more frequent updates
  • Better performance and smaller bundle size

Cons of Tippyjs

  • Steeper learning curve due to more features and options
  • May be overkill for simple modal or dialog requirements
  • Requires additional setup for modal-like functionality

Code Comparison

Tingle (creating a modal):

var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2'],
});
modal.setContent('<h1>Hello world</h1>');
modal.open();

Tippyjs (creating a tooltip):

tippy('#myButton', {
    content: 'Hello world',
    placement: 'top',
    arrow: true,
    animation: 'fade',
});

Summary

Tingle is focused on creating modals and dialogs, while Tippyjs is primarily for tooltips and popovers. Tippyjs offers more features and customization options but may be more complex for simple use cases. Tingle provides a straightforward solution for modals but lacks the versatility of Tippyjs. Choose based on your specific needs: Tingle for quick modal implementations, Tippyjs for advanced tooltip and popover functionality.

Pure JavaScript library for better notification messages

Pros of Toastify-js

  • Lightweight and focused on toast notifications
  • Extensive customization options for toast appearance and behavior
  • Supports custom CSS classes for easy styling

Cons of Toastify-js

  • Limited to toast notifications, not a full-featured modal solution
  • Lacks built-in accessibility features
  • No support for complex content structures within notifications

Code Comparison

Tingle (Modal creation):

var modal = new tingle.modal({
    footer: true,
    stickyFooter: false,
    closeMethods: ['overlay', 'button', 'escape'],
    closeLabel: "Close",
    cssClass: ['custom-class-1', 'custom-class-2']
});

Toastify-js (Toast creation):

Toastify({
    text: "This is a toast",
    duration: 3000,
    close: true,
    gravity: "top",
    position: "right",
    backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();

The code comparison highlights the different focus of each library. Tingle is designed for creating modals with various options, while Toastify-js specializes in creating toast notifications with customizable appearance and behavior.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Logo Tingle

Documentation

Documentation and demo can be found here: https://robinparisi.github.io/tingle/

Introduction

Tingle is a minimalist and easy-to-use modal plugin written in pure JavaScript:

  • No dependencies required
  • Fully customizable via CSS
  • CSS transitions
  • Simple API
  • No extra files to download
  • Created with UX in mind

Roadmap

  • Flexbox support
  • Better responsive
  • alert/dialog
  • Accessibility (any help is welcome)

Contribute

Run the demo and listen for changes:

$ git clone git@github.com:robinparisi/tingle.git
$ cd tingle
$ npm install
$ gulp serve

License

© 2018 Robin Parisi
Released under the MIT LICENSE

NPM DownloadsLast 30 Days