How to use stickybits - 10 common examples

useEffect(() => {
		const cleanup = () => {
			if (stickyRef.current) {
				try {
					stickyRef.current.cleanup();
				} catch (_) {
					// This sometimes fails if the element's parent has been unmounted. That's okay.
				}
			}
		};
		if (shouldUseSticky(metaMode)) {
			stickyRef.current = stickybits('.pub-meta-component', {
				stickyBitStickyOffset: 35,
				useStickyClasses: true,
			});
		} else if (stickyRef.current) {
			cleanup();
		}
		return cleanup;
	}, [metaMode]);

useEffect(() => {
		stickyRef.current = stickybits('.pub-history-component', {
			stickyBitStickyOffset: 35,
			useStickyClasses: true,
		});
		return () => {
			if (stickyRef.current) {
				try {
					stickyRef.current.cleanup();
				} catch (_) {
					// This sometimes fails if the element's parent has been unmounted. That's okay.
				}
			}
		};
	}, []);

useEffect(() => {
		stickyInstanceRef.current = stickybits('.pub-draft-header-component', {
			stickyBitStickyOffset: 35,
			useStickyClasses: true,
		});
		return () => {
			if (stickyInstanceRef.current) {
				stickyInstanceRef.current.cleanup();
			}
		};
	}, []);

recalculateStickyOffset() {
		const nextOffsetHeight = this.headerRef.current.offsetHeight;
		if (nextOffsetHeight !== this.offsetHeight) {
			this.offsetHeight = nextOffsetHeight;
			this.stickyInstance.cleanup();
			this.stickyInstance = stickybits('.pub-header-component', {
				stickyBitStickyOffset: 35 - this.offsetHeight,
				useStickyClasses: true,
			});
		}
	}

this.createStickyWrapper = () => {
      if (this.wrapper) {
        this.stickyWrapper = stickybits(this.wrapper, {
          stickyBitStickyOffset:
            parseInt(headerHeight, 10) + parseInt(semesterTabsHeight, 10)
        });
      }
    };

componentDidMount() {
            this._stickybits = this._node && stickybits(this._node, {
                scrollEl: this.props.scrollContainerSelector,
                noStyles: true,
                useGetBoundingClientRect: true
            });
            this.update(this.props.scrollContainerSelector);
        }

this.createStickyWrapper = () => {
      if (this.wrapper) {
        this.stickyWrapper = stickybits(this.wrapper, {
          stickyBitStickyOffset: parseInt(headerHeight, 10)
        });
      }
    };

componentDidMount() {
		this.setState({ isMounted: true });
		this.offsetHeight = this.headerRef.current.offsetHeight;
		this.stickyInstance = stickybits('.pub-header-component', {
			stickyBitStickyOffset: 35 - this.offsetHeight,
			useStickyClasses: true,
		});
		window.addEventListener('resize', this.handleResize);
	}

useEffect(() => {
		if (!isDocMode) {
			return () => {};
		}
		setIsMounted(true);
		const nextOffsetHeight = headerRef.current.offsetHeight;
		const stickyInstance = stickybits('.pub-header-component', {
			stickyBitStickyOffset: 35 - nextOffsetHeight,
			useStickyClasses: true,
		});

		return () => {
			stickyInstance.cleanup();
		};
	}, [pubData, windowWidth, isDocMode]);

componentDidMount() {
		this.stickyInstance = stickybits('.pub-draft-header-component', {
			stickyBitStickyOffset: 35,
		});
	}