1.4.3 • Published 4 years ago

react-useheadroom v1.4.3

Weekly downloads
4
License
MIT
Repository
github
Last release
4 years ago

react-useHeadroom

A lightweight custom React hook for hidding the header each time the scroll goes backward, this hook is returning a boolean state, which we can use in a component style prop or with CSSinJS.

Here is a demo live.

Installation

yarn add react-useheadroom or npm install react-useheadroom

Usage

import * as React from "react";
import "./styles.css";
import useHeadroom from "react-useheadroom";

const App = () => {
  const isPinned = useHeadroom({});
  return (
    <div
      className="header"
      style={{
        transform: isPinned
          ? `translate3d(0,0px,0)`
          : `translate3d(0,-100px,0)`,
      }}
    />
  );
};

export default App;

Props

Optionnaly you can pass those props.

  • fixAt the header will be fixed at this value, and cannot be unpinned (default value is 0).

  • onPin callback

  • onUnpin callback

  • onFix callback

  • onUnfix callback

Example

import * as React from "react";
import "./styles.css";
import useHeadroom from "react-useheadroom";

const App = () => {
  const isPinned = useHeadroom({
    fixAt:  /* e.g: 400 */,
    onPin: () => /* do something here ... */,
    onUnpin: () => /* do something here ... */,
    onFix: (fixedAt) => /* do something here ... */,
    onUnFix: (fixedAt) => /* do something here ... */
  });
  return (
    <div
      className="header"
      style={{
        transform: isPinned
          ? `translate3d(0,0px,0)`
          : `translate3d(0,-100px,0)`
      }}
    />
  );
}

export default App;
1.7.7

4 years ago

1.7.3

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.0

4 years ago

1.6.9

4 years ago

1.6.8

4 years ago

1.6.7

4 years ago

1.6.4

4 years ago

1.6.3

4 years ago

1.6.2

4 years ago

1.6.1

4 years ago

1.6.0

4 years ago

1.5.9

4 years ago

1.5.8

4 years ago

1.5.7

4 years ago

1.5.6

4 years ago

1.5.5

4 years ago

1.5.4

4 years ago

1.5.3

4 years ago

1.5.2

4 years ago

1.6.6

4 years ago

1.6.5

4 years ago

1.5.1

4 years ago

1.5.0

4 years ago

1.4.3

5 years ago

1.4.2

5 years ago

1.4.1

5 years ago

1.4.0

5 years ago

1.3.7

5 years ago

1.3.9

5 years ago

1.3.8

5 years ago

1.3.6

5 years ago

1.3.5

5 years ago

1.3.4

5 years ago

1.3.3-beta.1

5 years ago

1.3.3-beta.0

5 years ago

1.3.2-beta.6

5 years ago

1.3.2-beta.5

5 years ago

1.3.2-beta.4

5 years ago

1.3.0-beta.4

5 years ago

1.3.0-beta.3

5 years ago

1.3.1-beta.1

5 years ago

1.3.0-beta.2

5 years ago

1.3.0-beta.1

5 years ago

1.2.5

5 years ago

1.2.4

5 years ago

1.2.3

5 years ago

1.2.2

5 years ago

1.2.1

5 years ago

1.2.0

5 years ago

1.1.9

5 years ago

1.1.8

5 years ago

1.1.7

5 years ago

1.1.6

5 years ago

1.1.5

5 years ago

1.1.4

5 years ago

1.1.3

5 years ago

1.1.1

5 years ago

1.1.0

5 years ago

1.0.9

5 years ago

1.0.8

5 years ago

1.1.2

5 years ago

1.0.7

5 years ago

1.0.6

5 years ago

1.0.5

5 years ago

1.0.4

5 years ago

1.0.3

5 years ago

1.0.2

5 years ago

1.0.1

5 years ago

1.0.0

5 years ago