Live View Front End Components

Hi All.

I’m just getting into Live View and really enjoying the experience. I wondered though - what are people using for front end ui components? I thinking of things like Date Pickers, Time Pickerrs. I’ve seens some Live View only components but I think that for things like a date picker it would be better to do in the front end.

cheers

Dave

1 Like

I’d recommend web components which are a standard and will work with anything: plain js/react/vue/angular/you name it + LiveView. Google has a collection with Material UI (https://material-components.github.io/material-components-web-components/demos/index.html) but there are also more (https://www.webcomponents.org/element/vaadin/vaadin-date-picker)

1 Like

Vaadin is very heavy. Single date picker is 261.4kB (minified), 71kB(minified+gzipped)

Vanillajs, 0 dependencies. 48.2kB(minified), 13.8kB(minified+gzipped)


Some lightweight vanillajs components that work well with liveview:

Datepicker: https://github.com/flatpickr/flatpickr
Popover: https://github.com/atomiks/tippyjs
Combobox: https://github.com/TarekRaafat/autoComplete.js
Dropdown(arrow-up/down -able): https://www.webcomponents.org/element/@github/details-menu-element
Time element: https://www.webcomponents.org/element/time-elements
Sortable(dnd): https://github.com/SortableJS/sortablejs
Tab: https://github.com/github/tab-container-element

Either use with phx-hook or html “custom element”, you may not need hook since “custom element” has a bunch of callback such as connectedCallback, disconnectedCallback, attributeChangedCallback. For example, patching html attribute from liveview server will trigger that last callback, and when it’s removed from document you can dispose *EventListener inside disconnectedCallback callback.

8 Likes

I am in same boat.

I am avoiding unnecessary packages/plugins and using Alphine.js wherever possible.
I am searching for an alternative to select2, if readers know an easy way over jQuery.

Thanks for the suggestions @DanBunea and @50kudos - I’ll take a look at webcomponents and other vanilla js type options.

cheers

Dave

I was on the same hunt. Settled with slim select which is pretty nice. https://slimselectjs.com/

6 Likes

thanks @harmon25 - I’ll take a look.

cheers

Dave

I’m starting to use flatpickr but getting tripped up a little when Liveview executes validations on-change and updates the DOM. I figure a new thread was warranted, and describe my planned strategy to deal with this here: Correct strategy for using datepicker attached to an input field with Liveview?

If anyone has any helpful suggestions, I’d be eager to hear them! Thanks!

1 Like