Width of the preview browser in Elements

Elements Component Development
1

For a custom component, I need to retrieve the viewport width of the preview browser in Elements. Is there a way to retrieve this data?

2

No, you can’t get that info, and you shouldn’t need it.

Can you explain a little more on what you’re trying to do and perhaps we can give you a working solution or guide you on the best way forward :slight_smile:

3

In the editor, I was trying to make a certain thing happen at a specific width.

4

You just need to use the Tailwind CSS breakpoint system, this is what Elements natively supports and uses. Don’t try and write your own CSS to work out the editor width. Use Tailwind. Let me try and explain in a little more detail.

Here’s some sample HTML that changes the size of the fonts to give you an idea:

<p class="text-base sm:text-lg md:text-xl lg:text-2xl xl:text-3xl">
  Resize the window to see this text grow at each breakpoint.
</p>

And here’s some handy references:

Let me know if you have any questions :slight_smile:

5

Thanks for the video, yes, everything was already clear to me.
So I’ll ask you another question. I think there’s a function called rw.getBreakpoints. Is there a way, with Hooks, to retrieve the values ​​of the various breakpoints the user has set in the Screens section of Theme Settings?

I’m asking because I need the numeric value; in what I’m doing, I can’t simply use the predefined classes (such as xs:, md:, lg:, xl:, 2xl:).

6

Hi @Massimo,

You can access the breakpoints in a hooks file from the rw.theme object. The following is taken from the “Properties” example custom component.

const transformHook = (rw) => {
    // Get properties from rw
    const { theme = {}, pages } = rw

    // Get the breakpoints
    const { breakpoints } = theme

    // Set properties in our template data
    rw.setProps({
        // Create a string representation of the ordered breakpoint names array
        strBreakpoints: JSON.stringify(breakpoints.names),

        // Create a string representation of the breakpoint screens dictionary
        strBreakpointNames: JSON.stringify(breakpoints.screens)
    })
}

exports.transformHook = transformHook;

You should be able to create a new project, add a custom component using “Properties”, add it to the page and see the result at the bottom of the list.

Hope it helps

1 Like
7

Thanks, that’s what I needed.

1 Like