Hello #devElixir!!! Welcome to #FullStackElxpro
Here we discuss strategies and tips for your Elixir learning journey. This is from scratch until your first wave as an elixir developer
I am Gustavo and today's theme is: Getting Started Using Hooks with Phoenix and Liveview
_ps: You can follow the article with VIDEO
Want to learn more about elixir on a Telegram channel?
The hook is nothing more than a "hook", where you can send events to the server and vice versa.
In my experience, the main advantage is access to computer resources such as Geolocation, Bluetooth, wifi... among others and you can check with the images below.
The first step is always to understand when there is a need for the hook, understanding the need and LiveView cannot supply, start with a hook see documentation
The main elements of a hook are id and phx-hook="HookName" as shown in the image below:
<input type="text" name="mirror[id]" id="mirror-id" phx-hook="MirrorValues" class="border " /> <div id="mirror"></div>
After the definition you will receive the first error in your browser as follows:
In assets/js/app.js create a possibility to access hooks. The ideal is always separate hooks in dough as they can make a mess.
After defining the hooks file call, and creating a file to always point the hooks as you can see the image, in the hooks folder create hooks. See the image below.
And now create the hook as defined in input as MirrorValues and now and call the Js class,
What was created is simply a function with the name of the Hook, where mounted was executed when our element was added to our screen.
And what our hook does is nothing less than simply taking the input data and including it in a div.mirror tag
When starting to replace Liveview heavy lifting is not indicated.
I hope you enjoyed this article and it helped you to know when/not to use hooks :D