Necessarily Precedes Mischief

    use-header-scroll

    0.0.8 • Public • Published

    useHeaderScroll

    Control size of elements while scrolling

    Farmers Market Finder Demo

    Working Demo with useHeaderScroll

    Working Demo with useMultiScroll *New

    Install

    yarn add use-header-scroll

    or

    npm i --save use-header-scroll


    Using

    Basic - useHeaderScroll

    // Import
    import useHeaderScroll from "use-header-scroll";
    
    // Call the hook
    const height = useHeaderScroll({ min: 50, max: 120, endOffset: 550 });
    
    // Apply height on header
    return <header style={{position: 'fixed', height}}>Header</header>
    

    Advance - useMultiScroll

    // Import
    import { useMultiScroll } from "use-header-scroll";
    
    // Call the hook
    const [headerHeight, fontSize] = useMultiScroll({
      ranges: [[50, 300], [13, 40]],
      endOffset: 550
    });
    
    // Apply height and font size on header
    return <header style={{position: 'fixed', height: headerHeight, fontSize}}>Header</header>
    

    Full Example

    import React from "react";
    import useHeaderScroll from "use-header-scroll";
    
    const Demo = () => {
      const height = useHeaderScroll({ min: 50, max: 120, endOffset: 550 });
    
      return (
        <div>
          <header
            style={{
              backgroundColor: "red",
              position: "fixed",
              left: 8,
              right: 8,
              top: 0,
              height
            }}
          >
            Header
          </header>
          <article style={{ backgroundColor: "blue", height: 10000 }}>
            Content
          </article>
        </div>
      );
    };
    
    export default Demo;
    
    

    Options

    useHeaderScroll

    min - minimum height

    max - maximum height

    target - element to listen scroll (default: window)

    endOffset - the scroll offset to fully minimize header


    useMultiScroll

    ranges - array of arrays [[min1, max1], [min2, max2]]

    target - element to listen scroll (default: window)

    endOffset - the scroll offset to fully minimize header

    Keywords

    none

    Install

    npm i use-header-scroll

    DownloadsWeekly Downloads

    1

    Version

    0.0.8

    License

    MIT

    Unpacked Size

    112 kB

    Total Files

    9

    Last publish

    Collaborators

    • nir.avraham