Alright, so this is the part of the series I've been dying to get to where we show you all the new stuff in V four for writing JavaScript inside your live wire components. There's a ton and they're really good, but we're gonna start with something simple. We're gonna start with wire wrap. So here's gonna be our muse, this edit post component from before and there's a text area for all the content. Now in reality you're gonna use a rich text editor for a post like this, but we're using a text area.

Now in reality you're gonna use a rich text editor for a post like this, but we're using a text area. So the problem is that it doesn't, the text area element doesn't automatically resize based on content. So as I type it doesn't grow, it just scrolls, which is annoying. So we're gonna tackle that with pure JavaScript. Normally you're using like a rich text editor here, but this is a demo.

Normally you're using like a rich text editor here, but this is a demo. And so we're using text area. So here's the component edit post. We scroll down, there's the text area right here and we're gonna write some JavaScript by hand. Well paste a JavaScript from chat PT to make this thing work. So let me pull in that function. So auto sized text area is a function

So let me pull in that function. So auto sized text area is a function that takes in a dom element, does some stuff with JavaScript to resize the text area based on the content inside of it. Simple enough, we're gonna start by just calling it on initialization. So when our component loads, we're gonna call this function and it's gonna resize the text area for all the content inside of it. But first we need that dom element.

for all the content inside of it. But first we need that dom element. And this is what wire F is. You could use like document dot query selector text area or something. But of course you know that that's kind of brittle 'cause you might have three text areas on the page or something. You want something a little bit more targeted. And you've probably seen this in Alpine X

You want something a little bit more targeted. And you've probably seen this in Alpine X ref a lot of other frameworks. I think V has VRE F. It's just a great pattern. So we can say wire ref and then we'll name it. So we'll say content. So now we have a ref on the page and anywhere inside of our JavaScript we can say this refs content. And this is the same as wire refs content. If you had Alpine or using an alpine expression

And this is the same as wire refs content. If you had Alpine or using an alpine expression or if you just didn't like the, this syntax, you can always use dollar sign wire. This inside of a script tag is equivalent to dollar sign wire. Okay, so we autos size text area, we pass in that element. Initially we refresh and notice that the text area is now big enough for all the content.

and notice that the text area is now big enough for all the content. Great and just for the demo for fun, let's make it better so that as we type in it, resizes as well. And this is as easy as well let's put this inside of a variable. We'll say let L equals, I don't know, like that seems a little wrong. Let's say text area. Okay so text area equals this refs content.

Let's say text area. Okay so text area equals this refs content. And then we can do auto size on initialization and we can also add an event listener and say like add event listener for the input event. So as a user types in, we want to call uh yeah auto resize text area and pass in the text area element that we have. And now we should be set up so that as a user types it automatically resizes.

And now we should be set up so that as a user types it automatically resizes. So that's the simplest way to use wire ref. There's a lot of other cool things like if from PHP you're used to dispatching events, like maybe you dispatch an event, you can dispatch any event to a ref just by name like this and it will dispatch that event to that element. And more so you can add refs to nested components. So if you had like live wire modal,

And more so you can add refs to nested components. So if you had like live wire modal, you could say wire ref equals modal and then you could dispatch an event directly to that component, which is extremely powerful. And also you can access that dollar sign wire. So if you're still following this, I'm not like going deep on this demo, I'm not gonna add a nested component 'cause it just seems like a lot.

I'm not gonna add a nested component 'cause it just seems like a lot. But you could say like this dot refs modal wire and now you can access the dollar sign wire of that nested component. Um, so that's kind of next level stuff that you may not even ever use. But I know that you're gonna use wire ref in its simplest form for sure.

But I know that you're gonna use wire ref in its simplest form for sure. Um, so that's that. We're just getting the ball rolling here on adding JavaScript to this component and showing you all the fun stuff. So I'll see you in a second. So.