Docs
Getting Started
Preline JavaScript

Preline JavaScript

Learn what Preline JavaScript is, how it powers Tailwind CSS UI components, and how autoInit, TypeScript static methods, and initialization work.

Heads up!

For detailed documentation on plugins, please visit the plugins page.

Learn more

Helper for dynamic added components

Preline JavaScript plugins include autoInit static method, it's useful when you need to reinitialize all elements on the page.

                      
                        window.HSStaticMethods.autoInit();

This method can also be used with certain collections of initialized elements.

                      
                        window.HSStaticMethods.autoInit(['carousel', 'dropdown']);

AJAX example:

<select id="dynamic-select-options" data-hs-select='{
                        "placeholder": "Select option...",
                        ...
                      }' class="hidden --prevent-on-load-init"></select>
                      <button type="button" id="load-options">Load Options</button>
                      
                      <script>
                        document.getElementById("load-options").addEventListener("click", function() {
                          loadOptions();
                        });
                      
                        function loadOptions() {
                          const xhr = new XMLHttpRequest();
                          
                          xhr.onreadystatechange = function() {
                            if (this.readyState == 4) {
                              if (this.status == 200) {
                                const options = JSON.parse(this.responseText);
                                populateOptions(options);
                              } else {
                                console.error("Failed to load options:", this.status, this.statusText);
                              }
                            }
                          };
                      
                          xhr.open("GET", "https://some-api.com/options", true);
                          xhr.send();
                        }
                      
                        function populateOptions(options) {
                          const selectElement = document.getElementById("dynamic-select-options");
                          selectElement.innerHTML = "";
                          
                          options.forEach(function(option) {
                            const optionElement = document.createElement("option");
                            optionElement.value = option.value;
                            optionElement.textContent = option.text;

selectElement.appendChild(optionElement);
                          });
                      
                          window.HSStaticMethods.autoInit(['select']);
                        }
                      </script>

Usage of static methods inside TypeScript (TS) files

To use static methods inside TS files, it is necessary to declare the interface inside the files where method is called, this will prevent possible warnings and errors.

                      
                        ...
                        
                        import { IStaticMethods } from "preline/preline";
                        declare global {
                          interface Window {
                            HSStaticMethods: IStaticMethods;
                          }
                        }
                        
                        ...
                        
                        window.HSStaticMethods.autoInit();

Prevent auto initialize

To prevent an element from auto-initializing, you can add the --prevent-on-load-init CSS class.

This can be useful if you want to initialize elements using an event other than load.