Comments (4)
I'm a little reluctant to add this because of the extra code it would add to the module - wanting to keep it simple - vs. the small amount of boilerplate code for when this is needed.
In my experience if you are using a 3rd-party component which expects width on height on specific prop names, the component also has other props that it expects to be passed. That's the component that I enhance with react-dimensions
. E.g. (pulled from a random recent project)
class ImageGrid extends React.Component {
render () {
const {
containerHeight,
containerWidth,
files,
thumbSize
} = this.props
const columnsCount = Math.floor(containerWidth / thumbSize)
const columnWidth = containerWidth / columnsCount
const rowsCount = Math.ceil(files.length / columnsCount)
return (
<Grid
ref='grid'
columnsCount={columnsCount}
columnWidth={columnWidth}
height={containerHeight}
renderCell={this._renderCell}
rowsCount={rowsCount}
rowHeight={columnWidth}
width={containerWidth}
/>
)
}
}
module.exports = Dimensions()(ImageGrid)
My feeling there is such a small number of use-cases when this would save some lines of code, and not worth adding the extra lines of code to react-dimensions
.
from react-dimensions.
Will reopen if any further discussion that would require re-evaluating this.
from react-dimensions.
I was just thinking it'd be nice to be able to rename the size props as well.
I have lots of use cases where I really just want the width and height for widgets/dashboards etc. and it feels a tad inconvenient to not just be able to call them 'width' and 'height' if i want, without using another wrapper HOC just to transform the prop names...
from react-dimensions.
I'd be open to that. Open an issue and see what feedback it gets?
from react-dimensions.
Related Issues (20)
- Fallback when requestAnimationFrame is unavailable HOT 3
- IE9 compatibility HOT 5
- disableHeight & disableWidth HOT 2
- requestAnimationFrame support HOT 1
- ReactDOMServer stops rendering on react-dimensions decorated components
- add LICENSE
- Initial render has window size HOT 6
- documentation issues
- get 0 for "this.props. containerHeight" HOT 2
- Describe how to use 2.0.0-alpha1 HOT 5
- 不兼容 ie内核的浏览器吗?
- Question about enzyme/mocha tests HOT 4
- use hoist-non-react-statics HOT 1
- I want to know the compatibility of this component HOT 1
- Looking for maintainers HOT 9
- Allow element type of wrapper to be configurable
- getWrappedInstance broken
- The component that asks for dimensions should be rendered even if the dimensions are nil
- Not working with redux connect
- Np
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dimensions.