devminh/tien-react-sticky

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

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

Name	Description	Type
stickyPosition	Place sticky in top-left/top-right/bottom-left/bottom-right. Default is "bottom-right".	string
stickyWidth	Set width of the sticky using CSS width. Default width is 300px.	string or number
stickyHeight	Set height of the sticky using CSS height. Default height is 200px.	string or number
showStickyAt	Show sticky when scroll to X% of the original element's height. Default showStickyAt is 0. showStickyAt is an interger that ranges from 0 - 100.	number
isShowExpandIcon	Show the expand icon.	boolean
isShowHideIcon	Show the hide icon.	boolean
isManualCloseSticky	If true, the sticky will be constantly remained after scrolling below the origin element. If you click close icon, the sticky will be permanent disappeared. Use resetStickyState prop to reset sticky to its initial state.	boolean
resetStickyState	Use to reset the initial state of sticky. Use it as controlled mode, with default = 0. For example, you click close icon when set isManualCloseSticky={true}, use resetStickyState with incremental value is the same as reload page.	number
expandStickyWidth	Set width of the expanded sticky using CSS width. Default expanded width is 400px.	number or string
expandStickyHeight	Set height of the expanded sticky using CSS height. Default expanded height is 300px.	number or string
callbackOnCloseSticky	Callback when click close icon. For example, use for pause/stop video.	callbackOnCloseSticky?: (isCloseSticky: boolean) => void;
expandIcon	Replace default Font Awesome <ExpandIcon. />. You can use HTML elements such as img or svg.	React.ReactNode
hideIcon	Replace default Font Awesome <HideIcon. />. You can use HTML elements such as img or svg.	React.ReactNode
className	The HTML className attribute. This set the value of element's class content attribute. Do not recommend using className attribute. Should use only to change background, padding, color of sticky.	string
id	The HTML id attribute. This set the value of element's id content attribute. Do not recommend using id attribute. Should use only to change background, padding, color of sticky.	string
style	The ReactJS style attribute. This set the value of element's style content attribute. Do not recommend using style attribute. Should use only to change background, padding, color of sticky.	React.CSSProperties

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

Name	Description	Type
stickyPosition	Place sticky in "top-left", "top-right", "bottom-left" or "bottom-right". Default is "bottom-right".	string
stickyWidth	Set width of the sticky using CSS width. Default width is 300px.	string or number
stickyHeight	Set height of the sticky using CSS height. Default height is 200px.	string or number
expandStickyWidth	Set width of the expanded sticky using CSS width. Default expanded width is 400px.	number or string
expandStickyHeight	Set height of the expanded sticky using CSS height. Default expanded height is 300px.	number or string
isShowSticky*	Visible value of sticky in controlled mode - Required prop	boolean
callbackOnCloseSticky	Use only when not pass headerSticky prop, set state of isShowSticky	callbackOnCloseSticky?: (value: boolean) => void;
isExpandSticky*	Decide if the sticky will expand or not in a controlled mode - Required prop	boolean
callbackOnExpandSticky	Use only when not pass headerSticky prop, set state of isExpandSticky	callbackOnExpandSticky?: (value: boolean) => void;
headerSticky	Set header of the sticky. You can use HTML elements to display some buttons that can close or expand the sticky.	React.ReactNode
className	The HTML className attribute. This set the value of element's class content attribute. Do not recommend using className attribute. Should use only to change background, padding, color of sticky.	string
id	The HTML id attribute. This set the value of element's id content attribute. Do not recommend using id attribute. Should use only to change background, padding, color of sticky.	string
style	The ReactJS style attribute. This set the value of element's style content attribute. Do not recommend using style attribute. Should use only to change background, padding, color of sticky.	React.CSSProperties
ref	The ReactJS ref attribute. This ref is an attribute of original div element which contains the children you passed. This ref can be used to observe by the Intersection Observer API