react-enlighten

Make any react component responsive through context awareness.

Introduction

Traditional UI design assumes that we have the screens designed upfront. But that's not the case for modern design. In modern design, components are expected to work in multiple different scenarios, not just for single screen. This in turn means that we have to design components to be responsive using different tools than what is currently being used so far based on screen designs. We need new tools that works for the modern approach to designs - a component based approach.

I believe the way forward will be to make components more aware of their surroundings, as well as changes to those surroundings. Information about the immediate surroundings is quite straightforward, but informing the components of changes to these surroundings poses a set of challenges.

However, with extra contextual information, conditional rendering of markup and styles, made available in both jsx and css, will make responsive design on a component level more viable. In addition, one might imagine an entirely new set of opportunities to be introduced with this approach.

Install

npm install --save react-enlighten

Usage

HOC

import { enlighten } from "react-enlighten";
 
function WokeAF({ size }) {
  return <div> check the size: {size.width} (thx, react-sizeme) </div>;
}
 
export default enlighten()(WokeAF);

Render Prop Pattern

// work in progress

License

MIT © simonzeeks