Dynamically build responsive layouts in React

react-resp is a React library that provides a set of utility components to dynamically build responsive layouts

Using npm

npm i react-resp

react-resp exports multiple components. These components have the name of the viewports they bind to, named <[Viewport]>, as well their inverse, named <Not[Viewport]>.

One such component is called <Mobile>, and it's inverse is <NotMobile>

Below are some examples to get you started:

Strict Viewports only

Using the syntax below, you can dynamically render specific components/elements for a given viewport, based on current viewport specified

import { Mobile, Tablet, Laptop } from 'react-resp'
const Navbar = () => {
 <nav className="navbar">
 <div className="navbar-description">
 <Mobile>Mobile: Short Description</Mobile>
 <Tablet>Tablet: Slightly longer description on a tablet screen</Tablet>
 <Laptop>
 Laptop: A very long description that is displayed on laptop screens and has a lot of words
 </Laptop>
 </div>
 </nav>
}

Strict and Exceptional "Not" Viewports

By using a combination of <[Viewport]> and <Not[Viewport]>, you can dynamically render specific components on a single viewport of your choice, and render something else on all other viewport except the one you've already targeted

import { Mobile, NotMobile } from 'react-resp'
const Navbar = () => {
 <nav className="navbar">
 <div className="navbar-description">
 <Mobile>Mobile: Short Description</Mobile>
 <NotMobile>
 Tablet and Laptop: A description that is displayed on all viewports except mobile
 </NotMobile>
 </div>
 </nav>
}

This approach could useful in various practical situations. For example, if you wanted to render all navbar links on tablet and laptop devices, but display a hamburger icon on mobile, you could this library to accomplish your task

• Available viewports

• Available viewports

These breakpoints have been borrowed from Tailwind's Responsive Design docs`

Custom viewports coming soon

You can support further development of this project by giving it a 🌟 and help me make even better stuff in the future by buying me a ☕

Also, if you liked this repo, consider checking out my other projects, that would be real cool!