lucid-ui
Version:
A UI component library from AppNexus.
25 lines • 1.07 kB
JavaScript
import React from 'react';
import createClass from 'create-react-class';
import { Resizer } from '../../../index';
export default createClass({
render: function render() {
return /*#__PURE__*/React.createElement("div", {
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", null, "Other content"), /*#__PURE__*/React.createElement(Resizer, {
style: {
flexGrow: 1,
overflow: 'hidden'
}
}, function (width) {
return /*#__PURE__*/React.createElement("div", {
style: {
width: width,
height: width * 0.3,
border: '1px solid black'
}
}, /*#__PURE__*/React.createElement("div", null, "When using Resizer within a flexed container, its critical to add ", /*#__PURE__*/React.createElement("code", null, "flexGrow: 1, overflow: 'hidden'"), " to its styles so it will behave correctly."), /*#__PURE__*/React.createElement("div", null, "Width: ", width), /*#__PURE__*/React.createElement("div", null, "Height: ", width * 0.3));
}));
}
});