Skip to content

Commit

Permalink
Update docs
Browse files Browse the repository at this point in the history
  • Loading branch information
kjeske committed Apr 2, 2024
1 parent 4595edb commit 7b8c72f
Showing 1 changed file with 18 additions and 2 deletions.
20 changes: 18 additions & 2 deletions docs/content/features/js.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ the user experience. Those use cases usually refer to creating reusable componen
In practice it shouldn't be many places where JS is used, but it's good to have
an option to utilize it when needed.

## Usage
## Using Alpine.js

Hydro is using [Alpine.js](https://alpinejs.dev/) as the backbone for handling all interactions on the client side,
and it enables by default all the great features from that library. It means you can create
Expand Down Expand Up @@ -43,4 +43,20 @@ Example. Create local JS state and operate on it.
</div>
```

The only limitation is that you can't set a custom `x-data` attribute on the root element, that's why in the above example a nested div is introduced.
The only limitation is that you can't set a custom `x-data` attribute on the root element, that's why in the above example a nested div is introduced.

## Using Hydro extensions

You can also invoke JavaScript code using [Hydro actions](/features/actions) together with `Model.Client.Invoke`:

```razor
@model Search
<div>
<button
type="button"
hydro-on:click="@(() => Model.Client.Invoke("alert('test')"))">
Click me
</button>
</div>
```

0 comments on commit 7b8c72f

Please sign in to comment.