Merge pull request #191 from dbilgin/master

added renamed component prop

Author: janczizikow

src/index.js

@@ -23,6 +23,7 @@ export default class Headroom extends Component {
     pinStart: PropTypes.number,
     style: PropTypes.object,
     calcHeightOnResize: PropTypes.bool,
+    tag: PropTypes.string,
   };
 
   static defaultProps = {
@@ -37,6 +38,7 @@ export default class Headroom extends Component {
     wrapperStyle: {},
     pinStart: 0,
     calcHeightOnResize: true,
+    tag: 'div',
   };
 
   static getDerivedStateFromProps (props, state) {
@@ -332,7 +334,7 @@ export default class Headroom extends Component {
   }
 
   render () {
-    const { className: userClassName, ...divProps } = this.props
+    const { className: userClassName, tag: Tag, ...divProps } = this.props
     delete divProps.onUnpin
     delete divProps.onPin
     delete divProps.onUnfix
@@ -394,7 +396,7 @@ export default class Headroom extends Component {
       : 'headroom-wrapper'
 
     return (
-      <div style={wrapperStyles} className={wrapperClassName}>
+      <Tag style={wrapperStyles} className={wrapperClassName}>
         <div
           ref={this.setRef}
           {...rest}
@@ -403,7 +405,7 @@ export default class Headroom extends Component {
         >
           {this.props.children}
         </div>
-      </div>
+      </Tag>
     )
   }
 }

www/pages/index.md

@@ -76,3 +76,4 @@ Another option is to use CSS. The component has a `headroom` class as well as a
 *   `wrapperStyle` — pass styles for the wrapper div (this maintains the components vertical space at the top of the page).
 *   `parent` — provide a custom 'parent' element for scroll events. `parent` should be a function which resolves to the desired element.
 *   `pinStart` — height in px where the header should start and stop pinning. Useful when you have another element above Headroom component.
+*   `tag` - change the wrapper html element type. Default - `"div"`.