I'm working on a project that requires having a list of liked videos that show up next the main video display (similar to youtube's list of related videos). However, on smaller screen sizes I need the list to be rendered below the video and a couple of other elements. Currently, my solution is to have the list in two spots and have a variable that will either be show/hide based on screen size:
function determinePageSize() {
if (window.innerWidth > 600) {
return {
largeOnlyContainer: "container",
size: "desktop"
};
} else {
return { size: "mobile", hideOnMiblie: "hide" };
}
}
and then here's what I want to render:
<div style={{ position: "relative" }} class={`${responsiveVariables.hideOnMobile} container`}>
<div style={{ position: "absolute", left: "-20rem", width: "20rem" }} class={`${this.props.favoriteGifs.length > 0 ? "show" : "hide"} collection`}>
<a style={{ cursor: "pointer" }} onClick={this.handleHideFavorites} class="collection-item">
<span class="deep-purple-text text-darken-1">
Favorites
</span>
<span class="secondary-content" onmouseover="">
<i class="deep-purple-text text-darken-1 material-icons">
arrow_drop_down
</i>
</span>
</a>
<div
className={
this.state.collectionVisibility ? "show" : "hide"
}
>
{createCollection(
this.props,
this.props.deleteGif.bind(this, this.props.favoriteGifs)
)}
</div>
</div>
</div>
By having this code in two places and using show/hide it will work, however, I'm wondering if there's a better approach or whether there are performance issues that I should be aware of. The "createCollection" function is grabbing liked videos from a redux store and then creating an array of list components. Would it be worth passing an argument so its only called in one spot or perhaps creating a function that would be responsible for creating everything contained in the div above and having it only run once based on the screen size passed in as an argument. Will one of these approaches work or should I attempt to find a solution using css and media queries?
Your approach should work especially if you make sure createCollection is only called once and that the list of videos is of reasonable size (not in the 1000+).
The real question is about the determinePageSize.
I would expect more features depending on window size and if you are comfortable with solving all of them in a similar manner than its ok.
But if there are more developers working on same project maybe it is better to stick with standard solutions such as media queries just to ease the cognitive load (i expect any decent developer would be familiar with media queries but to understand what does size: "mobile" means they have to understand determinePageSize .