How should I organize my app where it has different behavior in responsive layout?
(Screenshot) for example Modal on Desktop vs New Page on Mobile.
5 Replies
Could you elaborate on your question? I feel like you already answered it urself
How would you organize this two separate behavior structurally in code?
The content of the page/modal stays the same. Move it to an own component
Afterwards define a page and a modal with that component
Use a media query to detect the device width, for mobile open a new page (or a drawer would be suiting too) and for desktop open the modal
If possible wrap this „two-way“ behaviour in a own wrapper component and add a comment to explain what happens in a short sentence.
I decided to go with this way. Does this look good?
/SettingsInput
index.tsx
/components
Modal.tsx
Drawer.tsx
Content.tsx
Is an alternative suggestion, but do it it the way that suits your project
And use a more explicit name than SettingsInput, this is just a generic example
That approach is called one-file-per-component, served me well