Product Compare Library

Product Compare is a library for product features, and product plans comparison. It supports multiple CSS frameworks and can be implemented in any HTML layout using data attributes. The library contains an embedded touch-enabled gallery, supports local and session storage, and can compare by text, HTML, or numbers.

Features

Product Compare is a library for making product features comparisons quickly and easily. It is written in modern ES6 JavaScript + TypeScript and doesn't have any external dependencies. Any CSS framework can be used for styling.

HTML Layout

The library has a flexible HTML layout that supports any CSS framework.
Data Types

It's possible to compare by different data types: text, HTML, and numbers.
Case Sensitivity

Case-sensitive and case-insensitive comparison is supported.
Regex Support

It's possible to use regex to ignore special characters.
Gallery

Responsive and touch-enabled gallery with the modern Web Animation API.
Storage Solutions

There is local storage, session storage, and cookies support.
Documentation

Great and extensive documentation is included.
Multiple Instances

It's possible to have any number of library instances on the same page.
Cutting-Edge Tech

The library is written in TypeScript + ES6 JS and uses modern Web Animation API.

Data Types

The library supports the following data types:

Text. The default comparison type is text. The comparison can be case-sensitive or non-sensitive. Also, it's possible to use regex to ignore some special characters.
HTML. HTML comparison is also supported. The library can compare any HTML elements like images, icons, or complex HTML structures.
Numbers. The library can compare numeric data. In this case, all other content except numbers will be ignored.

Storage

The library supports storage to save the current state and restore it after page refresh or when the back button is pressed.

Local storage - this is persistent storage that keeps data even if the user closes the browser.
Session storage - it will be cleared when the browser session is over, typically when the user closes the browser.
Cookies - unlike local and session storage, cookie values can be used on the server too. It's also possible to define cookies' expiration date.

Gallery

The library contains a responsive and touch-enabled gallery with the modern Web Animation API effects.

Mobile ready and touch-enabled. The gallery HTML is fully responsive and customizable via data attributes.
CSS Frameworks. Works in any CSS framework or pure CSS. The library contains examples of five famous CSS frameworks.
Animation. The library uses a modern & efficient Web Animation API.
CSS Classes. Dynamic CSS classes for selected, disabled, and hidden states.

Table

The library comparison table is fully customizable and mobile-ready.