beta-tien-react-sticky v1.0.9

tien-react-sticky

The React component for transforming element to sticky when scroll, like picture-in-picture, using Intersection Observer API

There is a beta package on npm. I suggest you to use it in non-critical project as there are still some issues that I am working on for the official release. https://www.npmjs.com/package/beta-tien-react-sticky

If you want to feedback, please create a new issue in the Github repo. Thanks for all the helpful suggestions. https://github.com/devminh/tien-react-sticky

Quick Start

This is a default TienStickyScroll declaration, the sticky will show as sticky when we scroll under the children element of <TienStickyScroll. /> (or target element)

<TienStickyScroll
  style={{
    backgroundColor: "#ffffff",
    padding: "12px",
  }}
>
  <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto" }}>
    <h3>MP4 Video</h3>

    <video
      src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
      controls
      width="100%"
    ></video>
  </div>
</TienStickyScroll>;

We have two components: TienStickyScroll which is a component that supports sticky rendering props on scroll, and TienSticky which is a controlled component that you can customize, with the React useState being a good usage suggestion.

I) TienStickyScroll component

An ideal TienStickyScroll declaration is to have width and height, expandWidth and expandHeight, expand and hide icon, when in the sticky state.

<TienStickyScroll
  stickyWidth="400px"
  stickyHeight="300px"
  expandStickyWidth="500px"
  expandStickyHeight="400px"
  isShowHideIcon
  isShowExpandIcon
  style={{
    backgroundColor: "#ffffff",
    padding: "12px",
  }}
>
  <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto" }}>
    <h3>MP4 Video</h3>

    <video
      src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
      controls
      width="100%"
    ></video>
  </div>
</TienStickyScroll>

If you want to remain the sticky after scrolling under target element, you can use isManualCloseSticky. However, when you click closed icon, it will permanently disappear. So there is an option is to use resetStickyState prop and pass it an incremental value. It will reset the sticky to the initial state, like you reload the browser tab.

      <TienStickyScroll
        stickyWidth="400px"
        stickyHeight="300px"
        expandStickyWidth="500px"
        expandStickyHeight="400px"
        isShowExpandIcon
        isManualCloseSticky
        resetStickyState={triggerReset}
        style={{
          backgroundColor: "#ffffff",
          padding: "12px",
        }}
      >
        <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto" }}>
          <h3>MP4 Video</h3>

          <video
            src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
            controls
            width="100%"
          ></video>
        </div>
      </TienStickyScroll>

      <button
        onClick={() => {
          setTriggerReset(triggerReset + 1);
        }}
      >
        Show sticky again
      </button>

If you want to change expandIcon or hideIcon, you can pass HTML elements such as img, svg or even a React component into expandIcon and hideIcon props.

You can define whether to show sticky when scroll at x% of the target element, with x ranges from 0-100.

Furthermore, you can set stickyPosition: "top-left", "top-right", "bottom-left" or "bottom-right".

     <TienStickyScroll
        stickyWidth="400px"
        stickyHeight="300px"
        expandStickyWidth="500px"
        expandStickyHeight="400px"
        isShowExpandIcon
        isManualCloseSticky
        showStickyAt={60}
        stickyPosition="top-left"
        resetStickyState={triggerReset}
        style={{
          backgroundColor: "#ffffff",
          padding: "12px",
        }}
      >
        <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto" }}>
          <h3>MP4 Video</h3>

          <video
            src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
            controls
            width="100%"
          ></video>
        </div>
      </TienStickyScroll>

      <button
        onClick={() => {
          setTriggerReset(triggerReset + 1);
        }}
      >
        Show sticky again
      </button>

All TienStickyScroll Props

II) TienSticky component

TienSticky is a controlled component that provides props can help you customize and manipulate the sticky state.

// Declare useState hook
  const [showSticky, setShowSticky] = useState<boolean>(true);
  const [expandSticky, setExpandSticky] = useState<boolean>(false);
     // ...
      <button
        onClick={() => {
          setShowSticky(true);
        }}
      >
        Show sticky
      </button>

      <TienSticky
        stickyPosition="top-left"
        stickyWidth="400px"
        stickyHeight="300px"
        expandStickyWidth="500px"
        expandStickyHeight="400px"
        isShowSticky={showSticky}
        isExpandSticky={expandSticky}
        headerSticky={
          <div style={{ display: "flex" }}>
            <img
              src="https://www.svgrepo.com/show/273966/close.svg"
              alt="close-icon"
              width="24px"
              onClick={() => setShowSticky(false)}
            />

            <img
              src="https://www.svgrepo.com/show/193951/expand.svg"
              alt="expand-icon"
              width="24px"
              style={{ marginLeft: "auto" }}
              onClick={() => setExpandSticky(!expandSticky)}
            />
          </div>
        }
        style={{
          backgroundColor: "#ffffff",
          padding: "12px",
        }}
      >
        <div style={{ width: "80%", marginLeft: "auto", marginRight: "auto" }}>
          <h3>MP4 Video</h3>

          <video
            src="https://samplelib.com/lib/preview/mp4/sample-5s.mp4"
            controls
            width="100%"
          ></video>
        </div>
      </TienSticky>

All TienSticky Props