renderon

⚛ A React.js HOC to manage component's className based on element size.

Installation

Install the NPM package using

npm i renderon

Usage

import React from 'react';
import Renderon from 'renderon';

const classes = {
  xs: {
    width: 300
  }
};

@Renderon({ id: 'app-main', classes })
class App extends React.Component {
  render() {
    return (
      <div id="app-main">
        <h1>Hello World!</h1>
      </div>
    );
  }
}

export default App;

Add the Renderon decorator to the target component and specify an id attribute for the component parent element. Renderon expects an object with an id key and a classes key.

Note in document.getElementById('foo') approach

This module is making use of the DOM by accessing through document.getElementById() which is an anti-pattern for React. The approach in Renderon is to find an element by the given id, set the ResizeObserver on it and track their changes in order to change the className based on given parameters (classes) such as media queries.

Why is this module v3 already?

This module used to have a bad architechture. I had a new idea and decided to reuse the package I started once. The old versions are deprecated and the version 3.0 still under construction.

Note on Google Chrome's ResizeObserver API

This module makes use of the Google Chrome's ResizeObserver API.

Renderon is compatible with other browsers thanks to Denis Rul's (que-etc) module "resize-observer-polyfill".

Contributions

Feel free to contribute to this project! Create an issue!

Important

This project is under construction.