responsive-css-material-ui

responsive-css-material-ui

A material-ui component which applies different CSS to a child component based on the page's current width (based on material-ui defined breakpoints).

The order of breakpoints: xs, sm, md, lg, xl. You can find here the values defined currently by material-ui for these breakpoints.

Demo

You can access the storybook for this component here.

Props

The component accepts the props defined bellow in the table.

Props accepted by ResponsiveCssMaterialUi

Name	Type	Required	Default	Description
lg	CSSProperties	no	undefined	CSS used for the lg breakpoint and wider screens (if not overridden)
md	CSSProperties	no	undefined	CSS used for the md breakpoint and wider screens (if not overridden)
sm	CSSProperties	no	undefined	CSS used for the sm breakpoint and wider screens (if not overridden)
xl	CSSProperties	no	undefined	CSS used for the xl breakpoint and wider screens (if not overridden)
xs	CSSProperties	no	undefined	CSS used for the xs breakpoint and bellow, and wider screens (if not overridden)

There must be only one child otherwise an exception is triggered.

Versions

ResponsiveCssMaterialUi uses	Material-ui	React
1.0.x	3.9.3	16.8.6
2.0.x	4.0.2	16.8.6
2.1.x	4.2.0	16.8.6
2.2.x	4.2.1	16.8.6
2.3.x	4.3.3	16.9.0
2.4.x	4.9.0	16.9.0
2.5.x	4.9.7	16.9.0
2.6.x	4.10.2	16.9.0
2.7.x	4.11.0	16.9.0
2.8.x	4.11.3	16.9.0 or 17.0.0
2.9.x	4.12.3	16.9.0 or 17.0.0
3.0.x	5.10.17	18.0.0
3.1.x	5.14.20	18.0.0

About versioning schema used for ResponsiveCssMaterialUi

• Major - it will be increased if the major version of the dependat package changes or there are breaking changes in the code of ResponsiveCssMaterialUi
• Minor - it will be increased if no major version of the dependat package changes, but there are changes of the minor or patch versions of it
• Patch - it will be increased if there are no changes of the dependat packages, but there are non breaking changes in the code of ResponsiveCssMaterialUi

Example

Displaying a div aligned differently based on the current window size:

import * as React from 'react';
import ResponsiveCssMaterialUi from 'responsive-css-material-ui';

class App extends React.Component {
  render() {
    var xs = { textAlign: 'center' };
    var md = { textAlign: 'left' };
    var lg = { textAlign: 'right' };
    var style = { color: 'gray' };

    return (
      <div className="App">
        <ResponsiveCssMaterialUi xs={xs} md={md} lg={lg}>
          <div style={style}>Text</div>
        </ResponsiveCssMaterialUi>
      </div>
    );
  }
}

export default App;

Changelog

1.0.0

• responsive-css-material-ui is made publicly available

1.0.1

• Corrected the way we decide which provided style is applied

1.0.2

• Removed the requirement to provide at least one prop

2.0.0

• Updated packages

2.1.0

• Updated packages

2.2.0

• Added a storybook
• Updated packages

2.2.1

• Added a prop debug for an easier development

2.3.0

• Updated packages

2.4.0

• Updated packages

2.5.0

• Updated packages
• Moved from npm to yarn

2.6.0

• Updated packages

2.7.0

• Updated packages

2.7.1

• Fixed crash produced by "export * from"

2.8.0

• Accepting React 17 as peerDependencies
• Fixed security warnings

2.9.0

• Updated the packages

3.0.0

• Migrated to material-ui 5
• Supports minimum React 18

3.1.0

• Updated the packages

3.1.1

• Fixed bundled lib