Lit 2.0 Web Component in React - using @LitLabs\React

greetings friends welcome today we're looking at using a web component react um and wrapping it using the newly released lit labs react wrapper this means it should operate better in terms of passing properties and handling events so the component i'm going to look at is this scroll to top one uh you'll see it in the bottom left here when you scroll down it appears click it we scroll back up um so i've added a new event to this and we're gonna try and hook into that in a react application and check that that works using the wrapper um so yeah this this is that that wrapper came out at the same time as lit 2.0 i did a video on that put a link to that here if you're interested and before we jump in if you find yourself enjoying the video feel free to click that subscribe below change the alert icon to all and you'll get updates for future videos all right let's jump in let's do an npm in it then we'll get we'll pull in react um react dom and then that wrapper as well which is lit labs react and the components are just linked to right weapon there i forgot to say install okay it should be pretty quick yep pretty quick all right let's create a very quick react application here that we can use to test so what would we need we need a section where our react app will um will insert itself into so we'll just say my app here that's where it will go and then we'll have a script for the application and that will come from main.js we'll use parcel this so have jsx in this i will use passl to compile that for us let's create a main.js and what will we need we'll need react from react and we'll need react dom like so i'll try and do this with a hook so we'll say our application is this guy here and we'll just put a simple div into the moment like so and try and render that out so we need to grab hold of that that div that we made in the page which is called my app so this should write out this guy here into that section um i'm going to say type module i'm not sure how well this is supported but i don't want because parcel by default will compile down to es5 and es5 isn't good for web components um so if i say in here only targets browsers greater than a recent chrome it should do it more es6 i think is the way i think that works i've seen it work right so if i now come in here and say parcel then we can go to localhost all right so there it does give me an error parcel but it does seem to work as well um so that's cool right let's get our web component added in um so we can just put it straight in here let's have um we'll just put these into sorry this header into here well what i'm going to need is that big page um so that we can get a scrolling effect going on so let's have let's have a few divs like so um whoops and give them all a style of um a nice height like so and we could also give them a background as well like that okay um if i put some text into each of these as well wait wha how come lauren works first one but not these ones what but okay okay uh right so let's try to have the word component uh we've got a bigger page now and i see that i think because of that error it doesn't refresh uh okay i've got a div issue is that why that one's not working um oh we are in react land so these guys need to have this like so and these are strings like so and commas all right uh there needs to be strings probably are we working oh yes we are okay so we've got a nice long scroll and i can add my component so let's add it um without the wrapper to start so i'm going to do an mpm link because i've got it on my computer here scroll to top so if i do make a change to it here i don't i don't need to go via npm with it there that's what that will do for us so i should see that in here uh there it is and you can see it's a link to it uh if you're interested in how link works i can put i've got a video on that um with a look there very useful right uh okay so right down the bottom here let's put in scroll to top web component and i'm going to need to import it here like so and will that work let work straight off if i scroll down [Music] maybe refresh whoa non js module files deprecated okay let's try and do it as pulling it in like so oh i haven't started that parcel again try that again okay that's better that's cool okay and there's his internal function so web components work in react you can just pull them in like that and they'll be they'll be happy they just they are just problems then when you want to say pass rather than just a simple boolean or a number into it uh if you want to pass in arrays um or objects then it struggles and that's where this rapper will help us out so i'm going to see if we can add this in so what's it called we need to import um well let's go back to the website scroll down here create component is what we need so i'm gonna pull and create component and then we're going to wrap it basically using this piece of code here so my element component i have scroll top component scroll to top um so that's fine my element is um scroll to top web component the class is this guy here scroll to top and we'll come back to the events in a second once we've got it working in its basic form so what this means now is i can this is now a react component we can use that as any other rep component rather than pulling in um html tag like that we would do it more like a visual as an actual react component because that's what it's essentially doing it's wrapping it and creating one for us um using this call here so now we've got this nice tag in here does it still work yeah it looks good give it a refresh in case in case it isn't working well nowhere no different error again let's just give it a restart okay i didn't like that too much or at all do we need do we need to provide something for the events would it be like you've got to have an event in there i mean i am going to be using one so and the event you're going to be using is scrolling they import the element not as a default but um i don't know if that would make any difference let's do that to start okay that was the problem was it yeah i mean this hasn't got a def yeah this hasn't got a default export so we needed to explicitly define a named export there and i was using the default export which was just failing i guess uh right so that's wrapped now that's wrapped and we come down and it's working okay that's cool now properties wise with this one i can specify um when how far down you've got to scroll before it appears so as i'm scrolling down well we're getting down hardly anywhere here um i'll just make these a bit bigger but we can specify that as a property on here we can say acti activate when and say put it up to a thousand and if i refresh that so now we're already past where we were before still going it's not appearing it appears now when we're down here about a third of the way down so that's fine and that would work even without the wrapper but the events a little bit more tricky so this one does actually raise a scrolling event once we start to once we click and it starts to scroll back up now to be able to handle that we need our wrapper and we need to provide the information on it here so i've only got one event um but it's going to be on scrolling and we'll say scrolling and with that in place i can now provide a callback and it will work successfully so i can say on scrolling and give it a function handle scroll say and we'll just console log out and we'll save the scrolling let's see if that works so we're if we clear this console uh give it a refresh and clear now we need to scroll down about a thousand now when i click it we should get that event and that is now handled within uh react and the wrapper is what is helping us out there um because if i if i take this if i comment that one out let's make this bigger there um and we use it without the wrapper and put the same stuff the same event handler and property on it then we're going to find that we're not going to get this guy here the handling scrolling effect so let me give it a refresh and scroll down and when i click here you can see we're just getting the internal console logs from it but this event um handle scroll is not being on it it's not working and so that's what this lit labs create component wrapper provides for us it makes it makes our web components function um as they should in all situations so you don't always need it um but very useful um to have it in place um so that's it a new part for lit 2.0 so let's come along with that oh that was interesting uh give me a thumbs up if you liked it thumbs down if not thanks very much for watching and i'll catch you next time bye [Music] you

Channel: A shot of code

Views: 915

Rating: 5 out of 5

Keywords:

Id: BtVGXQ3Y35k

Length: 18min 13sec (1093 seconds)

Published: Sun May 02 2021