React Responsive Box

The ResponsiveBox component allows you to create an application or a website with a layout adapted to different screen sizes. In this demo, each element on the page is a ResponsiveBox element whose location is specified for each possible screen size.

TS JS

Backend API

import React from 'react'; import ResponsiveBox, { Row, Col, Item, Location, } from 'devextreme-react/responsive-box'; const screen = (width: number) => ((width < 700) ? 'sm' : 'lg'); const App = () => ( <div id="page"> <ResponsiveBox singleColumnScreen="sm" screenByWidth={screen} > <Row ratio={1}></Row> <Row ratio={2}></Row> <Row ratio={1}></Row> <Col ratio={1}></Col> <Col ratio={2} screen="lg"></Col> <Col ratio={1}></Col> <Item> <Location row={0} col={0} colspan={3} screen="lg" ></Location> <Location row={0} col={0} colspan={2} screen="sm" ></Location> <div className="header item"> <p>Header</p> </div> </Item> <Item> <Location row={1} col={1} screen="lg" ></Location> <Location row={1} col={0} colspan={2} screen="sm" ></Location> <div className="content item"> <p>Content</p> </div> </Item> <Item> <Location row={1} col={0} screen="lg" ></Location> <Location row={2} col={0} screen="sm" ></Location> <div className="left-side-bar item"> <p>Left Bar</p> </div> </Item> <Item> <Location row={1} col={2} screen="lg" ></Location> <Location row={2} col={1} screen="sm" ></Location> <div className="right-side-bar item"> <p>Right Bar</p> </div> </Item> <Item> <Location row={2} col={0} colspan={3} screen="lg" ></Location> <Location row={3} col={0} colspan={2} screen="sm" ></Location> <div className="footer item"> <p>Footer</p> </div> </Item> </ResponsiveBox> </div> ); export default App;

import React from 'react'; import ResponsiveBox, { Row, Col, Item, Location, } from 'devextreme-react/responsive-box'; const screen = (width) => (width < 700 ? 'sm' : 'lg'); const App = () => ( <div id="page"> <ResponsiveBox singleColumnScreen="sm" screenByWidth={screen} > <Row ratio={1}></Row> <Row ratio={2}></Row> <Row ratio={1}></Row> <Col ratio={1}></Col> <Col ratio={2} screen="lg" ></Col> <Col ratio={1}></Col> <Item> <Location row={0} col={0} colspan={3} screen="lg" ></Location> <Location row={0} col={0} colspan={2} screen="sm" ></Location> <div className="header item"> <p>Header</p> </div> </Item> <Item> <Location row={1} col={1} screen="lg" ></Location> <Location row={1} col={0} colspan={2} screen="sm" ></Location> <div className="content item"> <p>Content</p> </div> </Item> <Item> <Location row={1} col={0} screen="lg" ></Location> <Location row={2} col={0} screen="sm" ></Location> <div className="left-side-bar item"> <p>Left Bar</p> </div> </Item> <Item> <Location row={1} col={2} screen="lg" ></Location> <Location row={2} col={1} screen="sm" ></Location> <div className="right-side-bar item"> <p>Right Bar</p> </div> </Item> <Item> <Location row={2} col={0} colspan={3} screen="lg" ></Location> <Location row={3} col={0} colspan={2} screen="sm" ></Location> <div className="footer item"> <p>Footer</p> </div> </Item> </ResponsiveBox> </div> ); export default App;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>

.demo-container, #page, #app { height: 100%; min-height: 300px; } .header { background-color: #C6B1DE; text-align: center; } .content { background-color: #EDBBE7; } .left-side-bar { background-color: #F9E2AE; } .right-side-bar { background-color: #9FD89F; } .footer { background-color: #B4D6FA; } .item { height: 100%; } #page p { font-size: 20px; padding-top: 10px; text-align: center; color: #000; }