Thind JS

Thind-js is a lightweight JavaScript framework designed for building powerful web applications with Webflow. It provides an intuitive API for data management, rendering, creating sortable tables, form handling, and element manipulation.

Installation

npm install thind-js

Usage

Importing Thind

import Thind, { DataStore, Render, SortableTable } from 'thind-js';

Creating a Thind Instance

Declare the attribute you will use globally in the DOM

const thind = new Thind({ attribute: 'data-my-el' });

Modules and Examples

Element Handling

Thind provides easy access to elements using custom attributes.

// Get a single element
const element = thind.element.get('my-element');
// Get a all elements
const elements = thind.element.getAll('my-elements');

Form Handling

Manage form submissions, validations, and values.

const form = thind.element.get('form');

// Disable the default Webflow submission
thind.form.disable(form); 

//Get value of a specific field by field name
const value = thind.form.value(form, 'username'); 

//Get values of all fields
const values = thind.form.values(form);

//Check if current form is valid, where all required fields are complete
const isValid = thind.form.isValid(form);

//Show Webflow native Form error and pass a custom error message
thind.form.error(form, 'An error occurred');

//Hide the native Webflow form error state
thind.form.errorHide(form);

//Show the Webflow form sucess state
thind.form.success(form, 'showMessage');

//Show the sucess state with custom sucess message
thind.form.success(form, 'showMessage', 'Login Sucessfull');

//Redirect user based on redirect settings of Webflow from
thind.form.success(form, 'redirect');

// Change the text of form button to show the status of form, at end pass true or false to disable or enable the submit buton. True will disable the button.
thind.form.changeSubmitButton(form, 'Submitting...', true);

// Reset the Webflow form. Clear the inputs and hide error & Success state.
thind.form.reset(form);

Page Management

Retrieve page information and URL parameters.

// Get current page name from url
const pageName = thind.page.name();

// Get all page parameters from url
const params = thind.page.parameters();

// Get value of specific page parameter from url
const param = thind.page.parameter('id');

DataStore

Manage your Webflow application state with a reactive data store.

import { DataStore } from 'thind-js';
import { log } from './logs.js';

// Usage example:
const store = new DataStore({ users: [] }, { caching: true });

// Subscribe to changes in users
store.subscribe('users', (newData) => {
  log(JSON.stringify(newData));
});

// Using DataStore's add, update, delete, and get APIs
store.add('users', { name: 'Placeholder' });
store.add('users', { name: 'Dilraj' });
store.add('users', { name: 'Parminder' });
store.add('users', { name: 'Jasbir' });

store.update('users.4', {
  ...store.get('users.4'),
  age: '23',
  test: true,
});

store.update('users.3', {
  ...store.get('users.3'),
  age: '23',
  test: true,
});

store.delete('users.0');

Check the demo here

Data Rendering

Render data to HTML elements.

const dataStore = new DataStore({ users: [] }, { caching: true });

const renderOptions = {
  element: document.getElementById('data-container'),
  data: [{ name: 'Alice' }, { name: 'Bob' }], // Provide data attribute with json data or bind the render instance with a key from Datastore
  dataStore: dataStore,
  key: 'user-data'
  config: {
    props: {
      name: {
        action: (data, element) => {
          element.textContent = data;
        }
      }
    }
  }
};

const render = new Render(renderOptions);


render.update([{ title: '123', complete: false }, { title: 'ABCD', complete: true }]);
render.clear();
render.destroy();

Check the demo here

Sortable Table

Create tables with sortable columns.

const tableConfig = {
  showIndicators: true,
  acsSvg: '<svg>...</svg>',  // Optional SVG code for icon that will be added text to the text of table header on a accessding sort
  descSvg: '<svg>...</svg>',  // Optional SVG code for icon that will be added text to the text of table header on a descending sort
  SvgClass: 'sort-icon' // Optional class to add to the svg icon
};

const sortableTable = new SortableTable('#header-wrapper', '#list-element', 'data-sort', tableConfig);

// Here we are finding headers inside #header-wrapper with attribute data-sort, and then for each found header we find list items that have data-sort="uniqe value"

Check the demo here