Conditional rendering based on the viewport size

Jax Wedel

6 months ago

How do I set an element to not render when the viewport is below 600px

? I have been looking everywhere for this solution

.

Lucas G

6 months ago

Use breakpoint and display

: none

@Lucas G

Use breakpoint and display

: none

Jax Wedel

6 months ago

That makes it still render

Lucas G

6 months ago

Unless you need more options then custom action I think

🤔

@Lucas G

Unless you need more options then custom action I think

🤔

Jax Wedel

6 months ago

You lost me

😅

I dont want to use

d

i

s

p

l

a

y

:none because you still render the component or element in the background

. I want it to just not render at all

Lucas G

6 months ago

I

’ll need to double check the actions tree

. I think I needed something like this when I was starting but I just used a custom action to return true

/false if below a certain viewport and I used that for the variable

Jax Wedel

6 months ago

how did you do that

?

Lucas G

6 months ago

I never tried to do it with a

“native

” way

@Jax Wedel

how did you do that

?

Lucas G

6 months ago

JavaScript

@Lucas G

JavaScript

Jax Wedel

6 months ago

Oh I am just now seeing that Actions are a thing

Lucas G

6 months ago

I could look for the function if it would be helpful but now I

’m trying to think if there

’s toddle actions for it

🤔

don

’t recall

Jax Wedel

6 months ago

but hmm

, I guess I should think differently than making two components

Lucas G

6 months ago

Two components

?

Jax Wedel

6 months ago

maybe for now I will just use

d

i

s

p

l

a

y

:none

Lucas G

6 months ago

Like render one

/hide one type of thing

?

Jax Wedel

6 months ago

well

, I am hiding the desktop menu and showing the mobile hamburger menu below 600px

. And for that I have to make to components

Lucas G

6 months ago

I can pass you the function in a bit when I

’m on comp if it would help

Jax Wedel

6 months ago

yup

Lucas G

6 months ago

Ah gotcha

Yeah I think that

’s what I needed it for as well

Back then I went the custom action route

Jax Wedel

6 months ago

a menu doesnt hurt to do two components rendered

, but

- later if there is a heavy components with API calls etc

- it can double usage

@Lucas G

Back then I went the custom action route

Jax Wedel

6 months ago

I see

. And how did you connect the Action

?

hmm

, I might have gotten it now

I just set the formula for show to false

, and it went away

. I forgot to test it in T mode

Jax Wedel

6 months ago

but

- how do I connect the

"viewport variable

" to be used in the formula

.

?

Lucas G

6 months ago

One sec

, I

'll pull it up

Jax Wedel

6 months ago

(window

.innerWidth

< 600

)

Tod

6 months ago

Great energy

@Jax Wedel

! Your continuous contribution to the toddle Community just made you advance to Community Level 4

!

Jax Wedel

6 months ago

its not working

😛

if I use an if

/else statement in the formula

, I need to set the condition

. But how to format it

?

Jax Wedel

6 months ago

@Andreas Møller

Does it allow for raw javascript

? Or is it only predefined functions

?

Lucas G

6 months ago

Found it

I used this

:

function viewportWidth

(

)

{

return window

.innerWidth

}

Something to note

, this just returns true

/false onLoad

It doesn

't update dynamically

I have to check where the one I rewrote is lol

@Lucas G

It doesn

't update dynamically

Jax Wedel

6 months ago

I think there is few people going bananas on the screen like we do

😛

the viewportWidth

, is that in formulas or in actions

?

Andreas Møller

6 months ago

You can create a custom action for it it instead

, that fires an event when the viewport changes

🔥1

💡1

/attachments/1262849554022400020/1262860451537223690/Screenshot_2024-07-16_215449.png

Jax Wedel

6 months ago

this should be the most cleaning shortest way

, but its just giving null

.

Jax Wedel

6 months ago

Ok I am going crazy

. Because the formula editor keeps deleting the first formula

.

@Jax Wedel

Ok I am going crazy

. Because the formula editor keeps deleting the first formula

.

Lucas G

6 months ago

Sorry

, got caught up in something

This is what I ultimately used

🔥1

Custom action

function viewportWidth

(args

, ctx

)

{

window

.addEventListener

(

'resize

'

, function

(

)

{

const isBelowThreshold

= window

.innerWidth

< args

.width

;

ctx

.triggerActionEvent

(

'isBelow

'

, isBelowThreshold

)

}

)

;

}

Set it onload

isBelow returns true

/false if it is below the number you enter

Jax Wedel

6 months ago

aaah

Lucas G

6 months ago

then that variable can be used wherever

https://start-shared_components.toddle.site/width-custom-action

@Lucas G

Jax Wedel

6 months ago

Where is that

?

Lucas G

6 months ago

On the page

Or component

The onload action

Jax Wedel

6 months ago

I couldnt find in the component

ah forget it

, I found it

. thanks

but I guess its best to use it on the page

, so it can be reused

@Lucas G

/attachments/1262849554022400020/1262866945129189376/image.png

Jax Wedel

6 months ago

how did you get that width

? this is mine

@Lucas G

Lucas G

6 months ago

Set the arguments and output event up

You can see how on the screenshot

Jax Wedel

6 months ago

ah I see it now

. I missed it

Lucas G

6 months ago

Sounds like you got it

For now

, this is probably the way to do it unless

'display

: none

' is acceptable or if toddle team releases more native actions around viewport

Jax Wedel

6 months ago

I tried opening the website template that comes with toddle to see how they did the menu there

- but that was even more confusing

😅

Laetitia | Pinshasa

1 month ago

Hey

@Lucas G

! How to check if the custom action actually works

?

Because I created that action and event

(on load and on attribute change

)

, and it doesn

't seem to detect the viewport

cc

@Andreas Møller

Tod

1 month ago

Great energy

@Laetitia | Pinshasa

! Your continuous contribution to the toddle Community just made you advance to Community Level 4

!

@Laetitia | Pinshasa

Hey

@Lucas G

! How to check if the custom action actually works

?

Because I created that action and event

(on load and on attribute change

)

, and it doesn

't seem to detect the viewport

cc

@Andreas Møller

Lucas G

1 month ago

The function works

. You can log the event to console

There is an action for it which you can fire on the event flow

Conditional rendering based on the viewport size

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Jax Wedel

Jax Wedel

Lucas G

Jax Wedel

Tod

Jax Wedel

Jax Wedel

Lucas G

Jax Wedel

Andreas Møller

Jax Wedel

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Jax Wedel

Lucas G

Jax Wedel

Lucas G

Jax Wedel

Laetitia | Pinshasa

Tod

Lucas G

Stop scrolling. Start building.

Chat with @team-toddle

Video call our CEO

Get in touch!

Product

Company

Resources

Community