Pradeep-selva / react-hide-on-scroll

A react component library to hide/show elements based on scroll

react-hide-on-scroll

A react component library to hide/show elements based on scroll

View Demo

Visit on npm

Installation

• To install from npm, run-

npm install --save react-hide-on-scroll

• To install locally, clone this repo and in root directory, run-

npm run setup

Usage

• Pass the element to be hidden as children to the components.

<HideBetween div startDivID="first" endDivID="third">
  <div className={classNames(styles.hide1to3, styles.sticky)}>
    hidden from div 1 to 3
  </div>
</HideBetween>

<HideOn divID="third">
  <div className={classNames(styles.sticky, styles.hideOnDiv)}>
    Hidden from third div
  </div>
</HideOn>

<HideScroll variant="down">
  <div className={classNames(styles.sticky, styles.hideScrollDown)}>
    Hidden on scrolling down
  </div>
</HideScroll>

<HideDuring>
  <div className={classNames(styles.sticky, styles.hideDuring)}>
    Hidden while scrolling
  </div>
</HideDuring>

API

HideBetween

To hide/show an element between 2 divs or between 2 specified heights(px)

Props	Description	Type	isOptional
children	The required react element that needs to be hidden	ReactNode	false
div	To hide between 2 specified divs	boolean	true
height	To hide between 2 specified heights	boolean	true
inverse	Specifying this will show the element instead of hiding, in specified breakpoints	boolean	true
startDivID	ID of the div to start hiding from	string	true
endDivID	ID of the div to stop hiding at	string	true
startDivOffset	To set an offset on the start position(in pixels) -- usable only with div prop	number	true
endDivOffset	To set an offset on the end position(in pixels) -- usable only with div prop	number	true
startHeight	Height from where hiding must begin (in pixels)	number	true
endHeight	Height where hiding must end (in pixels)	number	true

HideOn

To hide/show an element when reached a div or a specified height(px)

Props	Description	Type	isOptional
children	The required react element that needs to be hidden	ReactNode	false
atDiv	To start hiding at a div	boolean	true
atHeight	To start hiding at a height	boolean	true
inverse	Specifying this will show the element instead of hiding, in specified breakpoints	boolean	true
divID	ID of the div to start hiding from	string	true
offset	To set an offset on the hiding position(in pixels) -- usable only with div prop	number	true
height	Height from where hiding must begin (in pixels)	number	true
showOnPageInit	To specify whether the element must be visible when the component first loads	boolean	true

HideDuring

To hide/show an element during a scroll. (scroll to make element hidden/shown)

Props	Description	Type	isOptional
children	The required react element that needs to be hidden	ReactNode	false
inverse	Shows an element while scrolling instead of hiding it	Boolean	true

Hide

To hide an element on scrolling up or down.

Props	Description	Type	isOptional
children	The required react element that needs to be hidden	ReactNode	false
variant	To specify whether the element must be hidden on scrolling up or down (down by default)	"up" or "down"	true
showOnPageInit	To specify whether the element must be visible when the component first loads	boolean	true

Built using

• Typescript
• React
• create-react-library

License

MIT © Pradeep-selva