digidem / react-dimensions

[Looking for maintainers]

Home Page:http://lab.digital-democracy.org/react-dimensions/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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?