From e49caae59808cc165c88d06135b6cb0c2da3a7ec Mon Sep 17 00:00:00 2001
From: dbilgin <denizcanbilgin@gmail.com>
Date: Tue, 1 Dec 2020 22:16:48 +0100
Subject: [PATCH] moved props & added doc

---
 src/index.js       | 4 +---
 www/pages/index.md | 1 +
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/index.js b/src/index.js
index bbabc38b..c4acf5bd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -334,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
@@ -395,8 +395,6 @@ export default class Headroom extends Component {
       ? `${userClassName} headroom-wrapper`
       : 'headroom-wrapper'
 
-    const { tag: Tag } = this.props
-
     return (
       <Tag style={wrapperStyles} className={wrapperClassName}>
         <div
diff --git a/www/pages/index.md b/www/pages/index.md
index edc4808d..f1036e00 100644
--- a/www/pages/index.md
+++ b/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 with the tag of your choice.