SmartRender

Welcome to the new better world without display:none;!

SmartRender is a wrapper for your components that should be visible on certain breakpoints and not visible on others.

This approach is better than writing display: none; in CSS. If you use this package, HTML element that shouldn't be rendered - will not be in the DOM, in contrast to CSS display: none; rule (in this case HTML element will be presented in the DOM, but just not show).

Installation

You can install SmartRender using npm:

npm install --save --production smart-render

or using Yarn:

yarn add smart-render

This package depends on breakpoints-json. It is JSON formatted breakpoints which correspond to popular modern devices.

smart-render also depends on react and react-dom as peerDependencies. It means that it will not be installed automatically, but you will see a warning if they were not installed previously.

Usage

You should write breakpoints name to breakpoints props to render component only on necessary devices. In example below Avatar component should be rendered only on mobile devices.

import React, { Component } from 'react';
import SmartRender from 'smart-render';

export default class AppBar extends Component {
    render () {
        <SmartRender breakpoints = 'phonePortrait phoneLandscape' >
            <Avatar icon = 'person' />
        </SmartRender>
    };
}

Afterwords

We hope this package is helpful for you. If you enjoy it, fell free to star it. For anything else create a new issue. Contributions are welcome and we will be grateful for any corrections or questions you can send us.

We love supporting our open-source projects. You can be sure that we will help you in our gitter and twitter within 24 hours!

License

This project is licensed under the terms of the MIT license.