alpine-magic-helpers

Magic Helpers

A collection of magic properties and helper functions for use with Alpine.js version 2

:warning: Notice: This collection of helpers will be tied to version 2 of Alpine and will only receive bug fixes and minor updates as needed.

→ New features and plugins for V3 that will be found in the toolkit repo.

About

Adds the following magic helpers to use with Alpine JS.

Magic Helpers	Description
$component/$parent	Natively access and update data from other components or the parent component.
$fetch/$get/$post	Using Axios, fetch JSON from an external source.
$interval	Run a function every n milliseconds. Optionally start and stop the timer.
$range	Iterate over a range of values.
$refresh	Manually refresh a component.
$screen	Detect if the current browser width is equal or greater than a given breakpoint.
$scroll	Scroll the page vertically to a specific position.
$truncate	Limit a text string to a specific number of characters or words.
$undo	Track and undo state changes inside your component.

Adds the following custom directives to use with Alpine JS.

Custom Directives	Description
x-unsafe-html	like x-html but allowing new javascript scripts to run.

More to come!

If you have ideas for more magic helpers or custom directives, please open a discussion or join us on the AlpineJS Discord

Known issues

• Using $component/$parent in x-init
• Using Magic Helpers with Livewire

Installation

Include the following `

Or you can use the specific magic helpers you need:

```html

---

Manual

If you wish to create your own bundle:

npm install alpine-magic-helpers --save

Then add the following to your script:

import 'alpine-magic-helpers'
import 'alpinejs'

Or you can import the specific magic helpers you need like so:

import 'alpine-magic-helpers/dist/component'
import 'alpine-magic-helpers/dist/fetch'
import 'alpinejs'

---

:warning: Using Magic Helpers with Livewire

When using magic helpers along with Laravel Livewire, you need to make sure that the library is registered after Livewire to prevent Livewire from overriding the magic helper startup callbacks. This can be done either using the defer attribute on the magic helper script or including the magic helper script at the bottom of your body after @livewireScripts without the defer attribute.

---

$component

Example:

Arguably more useful, this also adds a $parent magic helper to access parent data

Demo

You may watch other components, but you must give them each an id using the 'id' attribute or x-id if you need more flexibility:

:warning: Using $component/$parent in x-init

…

html

Demo

As a shortcut, you can optionally use $get(url, params) or $post(url, data) to conveniently send a GET or POST request with params or data as the second argument.

Optionally pass in an Axios options object

If you need more control, you may pass in an object to customize the request See all options.

Example:

Note that this will return the entire response object, whereas by default $fetch will only return the data

---

$interval

Example:

…

html

Demo

---

$range

Example:

The $range helper mostly mimics implementations found in other languages $range(start, stop, step = 1)

Demo

N.B: You may use $range(10) which will compute to [1...10]

---

$refresh

Example:

Demo

---

$screen

Example:

The $screen helper detects if the current browser width is equal or greater than a given breakpoint and returns true or false based on the result.

By default the $screen helper uses the following endpoint borrowed by Tailwind CSS:

• xs: 0px
• sm: 640px
• md: 768px
• lg: 1024px
• xl: 1280px
• 2xl: 1536px

⚠️ NOTE: A single breakpoint is only going to tell you if the browser width is equal or greater than the given breakpoint. If you want to restrict the check to a specific range, you will need to negate the next endpoint as:

Custom breakpoints

You can pass a numeric value to use an ad-hoc breakpoint.

You can also override the default breakpoints including the following `

And using those breakpoints in your page.
```html

Demo

---

$scroll

Example:

    Scroll to foo

Demo

Alternatively, you can pass a css selector to scroll to an element at any position.

$scroll also supports integers to scroll to a specific point of the page.

Scroll to top

Demo (same as above)

$scroll optionally supports a second parameter where it's possible to define the behavior mode, auto|smooth (default smooth):

    Jump to foo

...

...
Jump to top

With offset:

    Scroll to 50px before foo

...

...
Jump to 50px before top (a bit daft but supported)

With both:

    Jump to 50px before foo

...

...
Jump to 50px before top

Demo (same as above)

---

$truncate

Example:

You may also pass a third argument to change the string that will be appended to the end:

Demo

Optionally pass in options

By default, $truncate will return take characters as a parameter. Instead you can pass in an object and trim by words. You may also update the ellipsis.

Example:

Demo (same as above)

Behind the scenes, for words, this uses sentence.split(" ").splice(0, words).join(" ") which does not define a word in all languages.

---

$undo

Example:

Demo

The $undo helper actually involves three helpers in one. First, add the $track() helper to the x-init directive to start tracking the component state. Next, add a button to $undo() changes as needed. And finally, you can access whether changes have occurred by using $history.length.

Optionally pass in options

By default, $undo will track all properties. Optionally you may limit the properties by passing in a string with the property name, or an array of property names.

Example:

Use $track(['prop1', 'prop2']) to track multiple properties

Demo

---

x-unsafe-html

Example:

    bar

'">test

:warning: Only use on trusted content. :warning:

Dynamically rendering HTML from third parties can easily lead to XSS vulnerabilities.

Demo

---

License

Copyright (c) 2020 Alpine Collective

Licensed under the MIT license, see LICENSE.md for details.