"How to" create UI variations based on screen width

[danmce]

_I am... a designer and a developer

| -------------------------------------------------------------------------------------------------

Requesting a new feature

I can't find any resources on how to alter the rendering of your components based on the the size of the viewport or artboard i.e. single column / two column, show / hide elements.

In Jon Golds' Design as a Function of Data video there is a component called ResponsiveColumnLayout which I presume is doing just this but I cant see a reference to the component in the source code.

A 'how to' on this would be useful or a pointer on an external resource detailing how to do this.

[macintoshhelper]

I don't think there is anything implemented in this that will let you do that.

I've published a demo example of a solution to this which involves using React's context API to set a breakpoint index to indicate the device type, which can be read by column container:

Here's the lines of code:

• https://github.com/macintoshhelper/react-sketchapp-examples/blob/master/responsive-devices/src/App.jsx#L68
• https://github.com/macintoshhelper/react-sketchapp-examples/blob/master/responsive-devices/src/App.jsx#L24

This can be abstracted to something really clean if you use a library like styled-system and create some wrappers to reimplement its responsive styling with the LayoutContext system: https://github.com/styled-system/styled-system/blob/master/docs/responsive-styles.md

Hope this is helpful.

[macintoshhelper]

A React context provider could be implemented into the Artboard component, together with a React Native style useWindowDimensions hook to get the width/height. This would break the project for pre-context React versions though.

@mathieudutour Maybe this could be implemented as a wrapper component around Artboard with context feature detection, together with a useWindowDimensions hook exported by react-sketchapp? Or maybe better for this to be handled by a third party library?

[mathieudutour]

That's a pretty cool idea. Happy to have Artboard be a context provider yes 👍

[macintoshhelper]

@danmce Would appreciate your feedback on #501 regarding the documentation. Is hooks documentation in API.md sufficient for working out how to do width/height conditional styling, or would a new layout.md docs file be best?