Add Option to Rename Size Properties
mindjuice opened this issue · comments
It would be great if we could pass in options to rename containerWidth
and containerHeight
to other things. Some components expect width
and height
directly, and right now I have to add yet another a wrapper component to rename the props (e.g., width={this.containerWidth} height={this.containerHeight}
).
I suppose another option would be to have a higher order component whose only job is to rename props (just found recompose.renameProps()
: https://github.com/acdlite/recompose/blob/master/docs/API.md#renameprops), but that adds some overhead.
I can work on a PR if this is something you'd like to add.
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
.
Will reopen if any further discussion that would require re-evaluating this.
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...
I'd be open to that. Open an issue and see what feedback it gets?