As a backend developer, I’m pretty proud of a little UI component I recently built a custom phone number input.
I feel like something like this would be a great as a native component in WeWeb someday!
Amongst the features there is translation or that it automatically reformats the input to ensure a consistent phone number structure no matter how the user types it (with or without spaces, starting with a 0 or not for French numbers, etc.).
It’s based on an npm package, but I had to do a good bit of customization to make it fit seamlessly with my style library.
2 questions:
1 - did I do it correctly that, in order to use the inputted value in my form, I created a variable inside the component that’s exposed outside, and then a workflow that populates that variable on change? I couldn’t find the values in another way…
2 - I’m trying to make the input width fill the container to 100% but I can’t seem to find the correct classes to do it through some additional css. Any tips?
This feature wasn’t included in the version currently listed in the shop. I’m actively maintaining the component, and I recently added dynamic width.
Please email me at the address shown on the component’s demo page in the marketplace, and I’ll send you the latest version.
btw for me, that variable isn’t directly available, I can only see it in my log when inside the component, not outside. (the workaround with an extra variable that gets filled throug a workflow works though)
Here’s what gets logged when I’m inside the component:
I didn’t remember at first, but it seems I added this exposed variable after the initial upload of the component to the marketplace. In any case, you should now have it in the updated version.
Loom video
