There are no third-party libraries used for responsive resizing. This was intentionally done in order to devise a minimalistic base for an application. The only actual dependency in package.json is React. All others are development-only.

  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.27",
    "@types/react-dom": "^18.0.10",
    "@vitejs/plugin-react": "^3.1.0",
    "postcss-nesting": "^11.2.1",
    "typescript": "^4.9.3",
    "vite": "^4.1.0"
  }

Having worked with frameworks like Bootstrap for years, I've developed a love/hate relationship with the 3rd party libraries. What I devised isn't fully-tested (and likely not production-ready), but it is functional, minimalistic, and something that can be used as a starting point to be built upon.

The component is located under /src/components/responsive

It consists of a higher order function that takes in an exiting component function, and serves as a provider of sorts for data the child component can utilize (passed in via props). It borrows, in principle, from mapStateToProps in Redux. In addition, it adds extra classes to the DOM whenever the screen is re-sized to pre-determined breakpoints (much like Bootsrap). This allows for styling based on screen-width classes, again, like bootstrap.

.responsive.screenSmall {
  & .columns .column.left-justify, .columns .column.right-justify {
    justify-content: center;
  }
}
.responsive.screenMed {
  & #featuredConditions {
    & .columns .column.left-justify, .columns .right-justify {
      justify-content: center;
    }
  }
  & #showNumDaysForm {
    & input {
      width: 90%;
      margin-left:10px;
      margin-right:10px;
    }
  }
}

The "wrapped" component receives the following properties from the responsive component provider:

• current screen size
• break points

This allows components to receive updates on the current screen width as it changes by using an event listener. This allows the component to determine whether it should alter it's layout programmatically and possibly trigger a full-on layout change and re-render. This is how the responsive grid component is able to adjust it's layout dynamically.

Programmatically, the responsive component function can be passed an object with key/value pairs consisting of breakpoint name, and breakpoint size. By default, it uses these breakpoints:

let defaultSizes:Sizes = {
  screenXSmall: 600,
  screenSmall: 768,
  screenMed: 992,
  screenLarge: 1200
}

Example: assuming the screen starts out at < 768px. Once it reaches 768, the event listener is fired, and the child component receives new props, triggering a re-render, allowing the component to adjust it's layout if needed. In addition, the "screen-small" class is added to the DOM, so CSS can be styled around these classes. This is nothing new, but the ability to re-render on change of screen width can be useful. The downside of re-render overhead can be balanced against the fact that it would be an edge case where the user would be resizing their browser over and over; making this module an edge case in and of itself. So let's just call it "an exercise in what's possible."