Question about the number property

Elements Custom Components
1

Is there a way to determine the number of div-elements using a number property? I’m looking for a method that allows a user in a custom component to set the number of div-elements through a numeric field in the inspector.

2

I think I understand what you’re after (though I could be wrong LOL)

You can generate items or content within the JS hooks file that can be used in a template.

So, create a custom component and add this to the properties file.

{
    "groups": [{
        "title" : "My Settings",
        "properties" : [{
            "title" : "Item count",
            "property" : "itemCount",
            "slider": {
                "default" : 10,
                "min" : 0,
                "max" : 40,
                "round" : true
            }
        }]
    }]
}

This gives us a slider ranging 0-40 called itemCount

Then, in the hooks file we can access the itemCount property and use it to generate items like this.

const transformHook = (rw) => {
        
    // Get the item count
    const { itemCount } = rw.props;

    // Generate array of items
    const items = Array.from({ length: itemCount }, (_, i) => i);    
    
    // Set items property to it can be used in the template
    rw.setProps({
        items
    });
}

exports.transformHook = transformHook;

Now we have an array of items in template data, we can loop over it in the template using an @each statement

<div class="text-lg text-center text-brand-500">
    @each(item in items)
        <div>Item {{item}}</div>
    @endeach
</div>

Sample project

1 Like
3

Thanks a lot Tom ! This is exactly what I need :grinning:

It’s gonna give some Custom Components an extra dimension :nerd_face:

1 Like
4

Can’t wait to see what you’re cooking up!

1 Like
5

The bubbles component is the result :sweat_smile: