@anubra266/stickyreact v1.0.1

Sticky React

Create Sticky Elements in React

Install

npm install --save @anubra266/stickyreact
#OR
yarn add @anubra266/stickyreact

Usage

import Component from 'my-project';

function App() {
  const handleStuck = target => {
    target?.classList.add('stuck');
  };

  const handleUnstuck = target => {
    target?.classList.remove('stuck');
  };

  const handleChange = ({ target, type }) => {
    if (type === 'stuck') {
      target?.classList.add('stuck');
    } else {
      target?.classList.remove('stuck');
    }
  };
  return (
    <StickyViewport as="div">
      <StickyBoundary
        onStuck={handleStuck}
        onUnstuck={handleUnstuck}
        onChange={handleChange}
      >
        <Sticky> I'm Sticky </Sticky>
        <div> I'm not Sticky </div>
        <div> I'm not Sticky too </div>
      </StickyBoundary>
      <StickyBoundary
        onStuck={handleStuck}
        onUnstuck={handleUnstuck}
        onChange={handleChange}
      >
        <Sticky>
          I'm also Sticky, but I override the above once I'm scrolled to
        </Sticky>
        <div> I'm not Sticky </div>
        <div> I'm not Sticky too </div>
      </StickyBoundary>
    </StickyViewport>
  );
}

API Reference

StickyViewport

Wrapper and Provider for Sticky App

<StickyViewport>...</StickyViewport>

StickyBoundary

Container that wraps each Sticky Element

<StickyBoundary>...</StickyBoundary>

Sticky

Makes it's content Sticky

<Sticky>...</Sticky>

onStuck

Callback when a child becomes Sticky.

(target: ReactNode) => {
  target?.classList.add('stuck');
};

onUnstuck

Callback when a child is no longer Sticky.

(target: ReactNode) => {
  target?.classList.remove('stuck');
};

onChange

Callback when a child becomes Sticky or Losesthe Sticky State.

NB: It provides a destructurable parameter

({ target, type }: { target: ReactNode, type: 'stuck' | 'unstuck' }) => {
  if (type === 'stuck') {
    target?.classList.add('stuck');
  } else {
    target?.classList.remove('stuck');
  }
};

NB: The paramters are to be destructured

Used By

This project is used by the following Projects:

• Choc UI - Site search bar