
**Before you can write any code you'll need to be setup with Google reCaptcha.**

When you're setup you'll want to add the Google reCaptcha API key and secret to
the project, I've added mine in `config/services.php`.

```php
'recaptcha' => [
    'key' => env('RECAPTCHA_API_KEY'),
    'secret' => env('RECAPTCHA_SECRET_KEY'),
],
```

Now we can reference them like so.

```php
config('services.recaptcha.key')
config('services.recaptcha.secret')
```

---

## Initialising Google reCaptcha

We need to add the Google reCaptcha JavaScript code to our project. Inside the
layout add the following to the `<head>`.

```html
<script
  src="https://www.google.com/recaptcha/api.js?onload=handleRecaptchaLoad&render=explicit"
  async
  defer
></script>
```

Here we're declaring there's an `onload` event which triggers the
`handleRecaptchaLoad` function.

Add the following before the `</body>` tag.

```html
<script>
  let captchaIds = ['recaptchaA', 'recaptchaB', 'recaptchaC', 'recaptchaD']

  function handleRecaptchaLoad() {
      captchaIds.forEach((captchaId) => {
          if (!document.getElementById(captchaId)) {
              return
          }

          grecaptcha.render(
              captchaId, {
                  'sitekey': '{{ config('services.recaptcha.key') }}',
                  'callback': `${captchaId}Submit`
              }
          )
      })
  }

  window.addEventListener('reset-google-recaptcha', () => {
      captchaIds.forEach((captchaId) => {
          if (!document.getElementById(captchaId)) {
              return
          }

          grecaptcha.reset(captchaId)
      })
  })
</script>
```

**What's Happening?**

The `handleRecaptchaLoad` function loops through the `captchaIds` array and does
the following.

- Checks an element exists with that `id`
- Initialises and renders a Google reCaptcha on that element
- Adds a callback to the function based on the `id`

This will create callback function name such as `recaptchaASubmit`.

**Why This Approach?**

This allows for multiple Google reCaptcha components on the same page without
them interfering with each other.

It works fine with a single Google reCaptcha component as well, but if you want
to remove the extra code, you do this.

```js
function handleRecaptchaLoad() {
    grecaptcha.render(
        captchaId, {
            'sitekey': '{{ config('services.recaptcha.key') }}',
            'callback': 'recaptchaComponentSubmit'
        }
    )
}

window.addEventListener('reset-google-recaptcha', () => {
    grecaptcha.reset('recaptchaComponentSubmit')
})
```

There's an event listener on the window which listens for a custom event
`reset-google-recaptcha`, when this is triggered it will reset the Google
reCaptcha components. This is required when using Livewire as the page does not
reload.

## Google reCaptcha Blade Component

We need to add some markup for the Google reCaptcha to hook into, I've done this
as a Blade component.

```blade
@props(['id'])

@push('scripts')
    <script>
        function {{ $id }}Submit(captchaToken) {
            @this.handleRecaptcha(captchaToken)
        }
    </script>
@endpush

<div>
    <div id="{{ $id }}"
         wire:ignore></div>

    @error('recaptcha')
        {{ $message }}
    @enderror
</div>
```

**What's Happening?**

This component accepts a single prop of `id` and does the following:

- Creating a unique function through the `id` prop
- Pushing that unique function to the `scripts` stack

This unique function matches up to the callback functions declared in the
`handleRecaptchaLoad` function.

**Talking to Livewire**

Through the use of `@this.handleRecaptcha(captchaToken)` we are passing the
response from the Google reCaptcha (`captchaToken`) to Livewire.

_If you haven't already make sure you add `@stack('scripts')` to your layout._

### Connecting to a Livewire Component

We now need to hook the Google reCaptcha component to Livewire. In this example
I'll be using a Livewire component called `Contact.php`.

First, we need to add the Blade component to the form within
`livewire/contact.blade.php`.

```html
<form>
  <x-form.recaptcha id="contactRecaptcha" />
</form>
```

On the Livewire component it needs state and methods so it can track if the
Google reCaptcha has been verified and handle submitting the form.

```php
class Contact extends Component
{
    use InteractsWithRecaptcha;

    public $recaptcha = false;

    protected $rules = [
        'recaptcha' => 'accepted',
    ];

    protected function messages()
    {
        return [
            'recaptcha.accepted' => 'reCaptcha is required.',
        ];
    }

    public function handleRecaptcha($captchaToken)
    {
        $this->recaptcha = $this->validateRecaptchaRequest($captchaToken);
    }

    public function submitForm()
    {
        $this->validate();

        $this->reset();

        $this->resetRecaptchaComponent();

        session()->flash('contact.success', 'Message sent!');
    }

    public function render()
    {
        return view('livewire.contact');
    }
}
```

We're using a custom trait called `InteractsWithRecaptcha`.

It's not required but if you're working with multiple Google reCaptcha
components then it's recommended.

Here's what that looks like.

```php
trait InteractsWithRecaptcha
{
    public function validateRecaptchaRequest($captchaToken)
    {
        $captchaResponse = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
            'secret' => config('services.recaptcha.secret'),
            'response' => $captchaToken,
        ])->json();

        return $captchaResponse['success'];
    }

    public function resetRecaptchaComponent()
    {
        $this->dispatchBrowserEvent('reset-google-recaptcha');
    }
}
```

In the `handleRecaptcha` function on the Livewire component we are calling
`validateRecaptchaRequest` which hits the Google reCaptcha API endpoint to
verify the request and return if it was a successful or not.

On the Livewire component, the returned value from the API becomes the
`recaptcha` state.

If it returns `false` then the validation will fail when the form is submitted,
if it's `true` then the form will submit.

When the form submits we are using the Livewire function `reset()` to reset the
Livewire components state, we are then calling the `resetRecaptchaComponent` on
the trait, which uses the Livewire `dispatchBrowserEvent` function to emit the
event `reset-google-recaptcha` to the DOM window.

When `reset-google-recaptcha` is triggered it resets the Google reCaptcha
components.

---

And there we have it, a working Google reCaptcha with Livewire.

Hopefully this isn't too confusing, there's a lot of pieces talking to each
other spread across files, but once the logic has been added to the project it
becomes a lot easier to follow.


Protect your forms with Google reCaptcha v2 with Livewire.

How to Use Google reCaptcha v2 with Livewire


If you're working with the Shopify API and Alpine JS then there might be times
you write some HTML like this:

```html
<p x-text="$store.variant.selected.price"></p>
```

This is getting the `variant` store from Alpine JS and returning the `price` of
the `selected` object.

For reference, the store might look something like this:

```js
Alpine.store('variant', {
  selected: null,
})
```

When using the Alpine JS directive `x-text` you can no longer use the Liquid
filters like `price | money` or `price | money_with_currency` which is a shame
as they provide an easy to use and read way of using the currency in Shopify.

Welcome... 🥁

## Alpine JS Shopify Money Directive

We can replicate this in Alpine JS with a custom directive:

I've created an Alpine JS directive called `x-money` that converts an integer
into a formatted price.

[Alpine JS Money](https://github.com/markmead/alpinejs-money)

There are options you can pass but in the context of Shopify we can use the
`.shopify` modifier which will look for the `window.Shopify` object.

```html
<p x-money.shopify="$store.variant.selected.price"></p>
```

And it's as easy as that.


How to render money in Shopify with Alpine JS.

Alpine JS Directive to Render Money in Shopify


At some point in your development career you will most likely be asked to make a
`<textarea>` autogrow with the value that the user has inputted.

There are a few approaches you can take when creating this functionality but the
most common is a JavaScript function similar to this.

```js
function textareaAutogrow() {
  let el = event.currentTarget

  el.style.height = 'auto'
  el.style.height = `${el.scrollHeight}px`
}
```

It's simple, clean and easy to use.

How do we take this and translate it to Alpine JS?

Let's start with a solution that uses the same code as the JavaScript example,
but written with Alpine JS.

## Basic Alpine JS Example

```html
<textarea
  x-data="{
    resize: () => {
      $el.style.height = 'auto';
      $el.style.height = `${$el.scrollHeight}px`
    }
  }"
  x-init="resize()"
  @input="resize()"
></textarea>
```

What's happening here?

We have the `x-data` context initialising a `resize()` function which has the
same logic as our JavaScript example. This function is then called when the
Alpine JS component initialises and again every time the `input` DOM event is
dispatched.

Great, this works but does it tick the three boxes of the JavaScript example?

**Simple**

Yes. It's standard Alpine JS, minus the creation of a function in an x-data
context.

**Clean**

No. It's added a extra complexity and bloat to your HTML which makes it much
harder to quickly read through.

**Reusable/Easy**

No. It's not DRY and that's not something I'd want to be using, especially in
HTML where things can often change.

## Extracting Alpine JS Logic Example

Let's take the logic we just wrote and extract it into it's own Alpine JS data
context function. Here's what that would look like.

```html
<textarea x-data="grow"></textarea>
```

And the Alpine JS directive.

```js
document.addEventListener('alpine:init', () => {
  Alpine.data('grow', () => ({
    init() {
      this.resize()
      this.$el.addEventListener('input', () => this.resize())
    },
    resize() {
      this.$el.style.height = 'auto'
      this.$el.style.height = `${this.$el.scrollHeight}px`
    },
  }))
})
```

This looks much better!

Handling it with this approach allows us to add `x-data="grow"` without having
to write the functionality over and over again. However... Let's take the
following example.

```html
<textarea
  x-data="{ valid: false, grow }"
  :class="{ 'border-green-500': valid }"
></textarea>
```

Here we have a `valid: false` which handles adding/removing a CSS class.

Will the CSS work? Yes.

Will the autogrow functionality work? No.

There's probably a way to fix this, but for now I have a different solution.

## Alpine JS Plugin Example

I've created an Alpine JS plugin called
[Alpine JS Textarea Autogrow](https://github.com/markmead/alpinejs-textarea-autogrow)
that handles this functionality with an Alpine JS directive.

What this means is we can add this functionality like this.

```html
<textarea x-data x-grow></textarea>
```

Here we are initialising an Alpine JS component with `x-data` which is required
to initialise the Alpine JS component. We then use `x-grow` which is an Alpine
JS directive provided by the plugin to handle the autogrow functionality.

Under the hood `x-grow` is the JavaScript example showcased at the start of this
blog post.

Something to ask is "Why would I use a plugin for something like this?" which is
a great question. Here's some reasons.

- Simple, clean and easy to use
- No HTML bloat
- Very small JavaScript package (0.000344 MB)
- Allows for full use of `x-data`

All of these examples have their use cases, but if I were to create a list of
best to worst approaches it would be.

1. Alpine JS Plugin -
   [Alpine JS Textarea Autogrow](https://github.com/markmead/alpinejs-textarea-autogrow)
2. Extracting Alpine JS Logic
3. JavaScript
4. Basic Alpine JS


Easily create an autogrowing textarea with Alpine JS.

How to Autogrow Textarea with Alpine JS (+ New Plugin)


[GitHub](https://github.com/markmead/hyperui)
[Website](https://www.hyperui.dev/)

HyperUI is one of the most popular Tailwind CSS components libraries on GitHub
with around 2.8k stars as of writing this. It's free, is open-source and
features over 250 components across marketing, eCommerce and application UI.

It's built with Next JS, Typescript and Tailwind CSS with components being HTML.
I opted for Typescript as it's an extra layer to prevent mistakes, this is vital
with the project being open-source.

As for the decision to create components in HTML it just makes sense. Even if
you are using JSX, Blade, Liquid... It's all HTML.

As well as components, HyperUI features a blog post that talks about the
following:

- Tips and tricks for Tailwind CSS
- Project updates and announcements
- Related project announcements


HyperUI


[GitHub](https://github.com/markmead/hyperjs) [Website](https://js.hyperui.dev/)

HyperJS is an open-source collection of Alpine JS components. I built this
project based on the annoyance of having to write duplicate Alpine JS logic for
different projects.

I've built examples with Tailwind CSS but have limited the UI so that they are
presentable within the context of HyperJS, but are not full of Tailwind CSS
bloat, this makes them easy to drop into any project.

I also use HyperJS as a platform to showcase off plugins that I and others have
built for Alpine JS.

The website is built with Next JS and Tailwind CSS.


Mark Mead

Featured Projects

HyperUI

HyperJS

Latest Posts

How to Use Google reCaptcha v2 with Livewire

Alpine JS Directive to Render Money in Shopify

How to Autogrow Textarea with Alpine JS (+ New Plugin)