https://github.com/bigskysoftware/htmx-extensions
https://github.com/bigskysoftware/htmx-extensions
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/bigskysoftware/htmx-extensions
- Owner: bigskysoftware
- Created: 2023-12-14T17:59:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-12T18:54:00.000Z (about 2 years ago)
- Last Synced: 2024-04-14T20:21:17.824Z (about 2 years ago)
- Language: JavaScript
- Size: 18.2 MB
- Stars: 34
- Watchers: 4
- Forks: 7
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# htmx Extensions
[htmx](https://htmx.org) provides an extension mechanism for defining and using extensions within htmx-based applications.
A list of extensions can be found at . If you wish to contribute an extension to that
list, open a PR request against ,
or check out our [contribution guidelines](CONTRIBUTING.md) for contributions to existing extensions.
## Using Extensions
Using an extension involves two steps:
* include the extension definition, which will add it to the `htmx` extension registry
* reference the extension via the [hx-ext](https://htmx.org/attributes/hx-ext/) attribute
Here is an example
```html
This Button Uses The Debug Extension
```
This loads the debug extension and then adds the debug extension to the given button. (This
will print out extensive logging for the button, for debugging purposes.)
Note that the `hx-ext` tag may be placed on parent elements if you want a plugin to apply to an entire part of the DOM,
and on the `body` tag for it to apply to all htmx requests.
**Tip:** To use multiple extensions on one element, separate them with a comma:
```html
This Button Uses Two Extensions
```
## Ignoring Extensions
By default, extensions are applied to the DOM node where it is invoked, along with all child elements inside of that parent node.
If you need to disable an extension somewhere within the DOM tree, you can use the `ignore:` keyword to stop it from being used.
```html
This button used the debug extension
This button does not
```
## Defining an Extension
To define an extension you call the `htmx.defineExtension()` function:
```html
(function(){
htmx.defineExtension('my-ext', {
onEvent : function(name, evt) {
console.log("Fired event: " + name, evt);
}
})
})()
```
Typically, this is done in a stand-alone javascript file, rather than in an inline `script` tag.
Extensions should have names that are dash separated and that are reasonably short and descriptive.
Extensions can override the following default extension points to add or change functionality:
```javascript
{
init: function(api) { return null },
getSelectors: function() { return null },
onEvent: function(name, evt) { return true },
transformResponse: function(text, xhr, elt) { return text },
isInlineSwap: function(swapStyle) { return false },
handleSwap: function(swapStyle, target, fragment, settleInfo) { return false },
encodeParameters: function(xhr, parameters, elt) { return null }
}
```