diff --git a/example/src/MySizeAwareComponent.js b/example/src/MySizeAwareComponent.js index 36b3676..bccf88a 100644 --- a/example/src/MySizeAwareComponent.js +++ b/example/src/MySizeAwareComponent.js @@ -22,18 +22,20 @@ const spanStyle = { transform: `translateX(-50%) translateY(-50%)` }; -function MyComponent({ size: { width, height }, style }) { +function MyComponent({ children, size: { width, height }, style }) { return (
{Math.round(width)}x{Math.round(height)}
(rounded) + {children}
); } MyComponent.propTypes = { + children: PropTypes.node, size: PropTypes.shape({ width: PropTypes.number.isRequired, height: PropTypes.number.isRequired, diff --git a/example/src/index.js b/example/src/index.js index 0fe9b74..4004313 100644 --- a/example/src/index.js +++ b/example/src/index.js @@ -21,8 +21,11 @@ function App() {
+ style={{ height: `250px`, backgroundColor: `rgb(29, 165, 154)`, position: `relative` }} + > + + diff --git a/src/SizeMe.js b/src/SizeMe.js index 6d16fb4..999c788 100644 --- a/src/SizeMe.js +++ b/src/SizeMe.js @@ -37,7 +37,7 @@ function Placeholder({ className, style }) { // container take the full available space. if (!className && !style) { phProps.style = { - width: `100%`, height: `100%`, position: `relative` + width: `100%`, height: `100%` }; } else { if (className) { diff --git a/test/SizeMe.test.js b/test/SizeMe.test.js index d1612dd..da1a195 100644 --- a/test/SizeMe.test.js +++ b/test/SizeMe.test.js @@ -4,8 +4,8 @@ import React from 'react'; import { expect } from 'chai'; import { describeWithDOM } from './jsdom'; import sinon from 'sinon'; -import { mount, shallow } from 'enzyme'; -import { renderToString } from 'react-dom/server' +import { mount } from 'enzyme'; +import { renderToString } from 'react-dom/server'; const html = ` @@ -28,7 +28,7 @@ describeWithDOM(`Given the SizeMe library`, () => { let SizeMe; let SizeMeRewireAPI; let resizeDetectorMock; - const placeholderHtml = `
`; + const placeholderHtml = `
`; beforeEach(() => { SizeMe = require(`../src/index.js`).default;