News>Announcing

Phx_component_helpers - Extensible live_components, without boilerplate

#library#liveview#livecomponents#phx_component_helpers
cblavier

cblavier

Phx_component_helpers - Extensible live_components, without boilerplate

Hey there :waving_hand:

A few days ago I extracted a lot of functions I’m using in 2 different projects (one large phoenix LiveView project and a small PETAL app)

https://github.com/cblavier/phx_component_helpers

It basically answers to the following needs:

  • quickly package UI code into live_components
  • make components extensible from the templates (in the spirit of Tailwind & Alpine)
  • less boilerplate possible.

I first tried Surface, and even if I was impressed, it felt too heavy for me (btw it has more line of codes than LiveView itself) and I’d really prefer to stay closer to the underlying library (LiveView)

Let me know what you think of this lib :hugs:

39 comments
#library#liveview#livecomponents#phx_component_helpers
89 3372 39

Most Liked

cblavier

cblavier

A glimpse of some of the components we’re writing with phx_component_helpers :eyes:
A table with infinite scroll, sticky headers, sorting, filtering, placeholder, result counter … coming for really cheap to our front-end developpers :slight_smile:

Code source is really neat with proper component encapsulation :ok_hand:

CleanShot 2021-04-13 at 17.56.41@2x
CleanShot 2021-04-13 at 17.56.41@2x1894×1820 190 KB

10
Post #7
cblavier

cblavier

As we started to get an ever growing list of components and were also looking to get stronger UI guidelines (I’m looking at you Tailwind colors :eyes:) we built our own storybook (inspired from React’s)

Here is a preview:

https://s3.gifyu.com/images/storybook.gif

9
Post #10
cblavier

cblavier

0.8.0 :rocket:

I’m still (I guess) the sole user of this library, but for whatever reason I’m polishing it as if it were to be used by thousands :sweat_smile:

https://github.com/cblavier/phx_component_helpers/blob/main/CHANGELOG.md

8
Post #3

Where Next?

View thread on forum (has 39 responses!)
library
liveview
livecomponents
phx_component_helpers
Home News>Announcing
#library#liveview#livecomponents#phx_component_helpers
89 3378 39
Last post

Popular in Announcing Top

mischov
News>Announcing

Meeseeks - A library for extracting data from HTML and XML with CSS or XPath selectors
import Meeseeks.CSS html = HTTPoison.get!("https://news.ycombinator.com/").body for story <- Meeseeks.all(html, css("tr.athing")) do...
#library#meeseeks
242 12253 86
New
tfwright
News>Announcing

LiveAdmin - Phoenix admin UI built on LiveView
After working on it for a couple of months and using it in production for most of that time, today I’ve released LiveAdmin, a LiveView ba...
#library#liveview#admin-tools
126 11362 37
New
devonestes
News>Announcing

Assertions - helpful assertions to help you write better tests
Introducing assertions, the library that helps you write really great test assertions! GitHub: GitHub - devonestes/assertions: Helpful a...
#library#assertions
33 11977 11
New
Crowdhailer
News>Announcing

OK: Elegant error handling for elixir pipelines. Version 1.0 released
I have been updating a library that allows you to pipe between functions that use the erlang result tuple convention. Assuming you have ...
#macros#library#pipeline#syntax
34 6532 16
New
woutdp
News>Announcing

LiveSvelte - E2E reactivity in LiveView with Svelte
Hi! I wanted to introduce my latest project LiveSvelte. It allows you to render Svelte inside LiveView with end-to-end reactivity. It’s ...
/phoenix#library#liveview#livesvelte
87 5080 14
New
blatyo
News>Announcing

Conduit - A framework for building reliable, event-based systems
The best overview for how things are tied together is this presentation. Modules and functions are pretty well documented at this point, ...
#library#rabbitmq#conduit#sqs#mqtt
69 7315 23
New
mbuhot
News>Announcing

OpenApiSpex - OpenAPI / Swagger 3.0 for Plug APIs
Leverage Open Api 3.0 (Swagger) to document, test, validate and explore your Plug and Phoenix APIs. Generate and serve a JSON Open API ...
#library#plug#swagger#open_api_spex
79 14556 54
New
treble37
News>Announcing

When "stringifying" keys in a map, would you want to convert struct keys to strings?
Just looking for a little feedback on a tiny helper library I built - Sometimes I find the need to convert maps with atom keys to maps w...
#library#maps
5 6971 4
New
Hal9000
News>Announcing

Random - based on :rand (not :random)
Here is my first stab at this. README pasted below. https://github.com/Hal9000/elixir_random Comments and critiques are welcome. Thank...
#library
29 9089 23
New
pkrawat1
News>Announcing

Gringotts: A complete payment library for Elixir and Phoenix Framework
Hey guyz We at @aviabird are working on a payment library in elixir/phoenix. We are targeting March 2018 to add 56 Gateways to it. Have...
#library#gringotts#payments#payment-gateways
193 12698 51
New

Other popular topics Top

AstonJ
Chat & Discussions>Polls

Which Neovim configuration distro do you use/recommend? (Poll)
Posting this to see if we can make things easier for people to get into Neovim. If you use Neovim and have a favourite distro please let ...
#polls#code-editors#neovim
79 13941 31
New
ovidiubadita
Questions & Help>Questions

Elixir for game development
Hey all, I discovered Elixir and I love it. I always wanted to learn a functional programming and I intended to go for Haskell, but afte...
#game
30 23559 25
New
jononomo
Questions & Help>Questions

Where / How does the Mix environment variable get set?
I am trying to figure out how Mix knows whether the environment is test, dev, or prod – where is this set? Thanks.
#mix
31 23040 9
New
chrismccord
News>Phoenix News

Phoenix 1.4.0 released!
Phoenix 1.4.0 released Phoenix 1.4 is out! This release ships with exciting new features, most notably with HTTP2 support, improved deve...
/phoenix#phoenix-release
688 30877 112
New
vegabook
Questions & Help>Questions

How to serve an img with Phoenix?
I’m brand new to Phoenix and I have stripped one of the demo applications to the bone. I just want to get an svg up on the screen. Here i...
/phoenix
15 18745 5
New
alice
Questions & Help>Questions

What are the main benefits of Elixir compared to Clojure?
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
#clojure
229 33752 47
New
aalberti333
Questions & Help>Questions

Enum.map over list of key/value pairs with a map as the value
As the title describes, I’m trying to run Enum.map() over a list of key/value pairs, where the value is a map. My data looks like this: ...
#enummap
7 19866 6
New
freewebwithme
Questions & Help>Questions

Failed to run 'elixir' command error in vs code
Using vs code and installed ElixirLS: support and debugger. And I got an error popped up on start up says Failed to run ‘elixir’ comma...
#vscode#elixir-ls
49 16580 39
New
ashish173
Questions & Help>Questions

Difference in between :utc_datetime and :naive_datetime in Ecto
I am using Ecto timestamps with postgres, I can see the timestamps() use the :naive_dateime but for my use case I wanted to store the ti...
#ecto#timestamps
79 28181 15
New
nsuchy
Questions & Help>Questions

IEX in Windows Powershell?
Hi. I’ve noticed that Windows Powershell has it’s own IEX command and you cannot access Elixir’s IEX due to the conflict. This isn’t a cr...
#iex#microsoft-windows#windows#powershell
15 30117 4
New
Back to top

News>Announcing

News Announcing ❯

Latest on Elixir Forum

Elixir Forum ❯

Sponsor Spotlight

Dashbit

Build Elixir applications with speed and confidence.

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

Dashbit

Build Elixir applications with speed and confidence.

EEF

Supporting innovation across the BEAM ecosystem.

Coders51

We build reliable cloud platforms for business-critical systems.

AppSignal

Catch errors, track performance, monitor hosts and more.

Honeybadger

Real-time error tracking, performance insights, and observability for devs.

Pragmatic Bookshelf

Practical resources that improve the lives of professional developers.

WyewWorks

Enabling companies to succeed by building software people love.

Potions

The deployment platform built for Elixir: PaaS ease, VPS control.

Pragmatic Studio

Courses that'll move you from confusion to "Aha, now I get it!"

View all our sponsors ❯

We're in Beta

About us Mission Statement