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>

| Parameter | Type | Description | Required | Deffault | | :-------- | :------------------------- | :---------------------------- | -------- | -------- | | as | string or ReactElement | React Element used in display | false | div |

StickyBoundary

Container that wraps each Sticky Element

<StickyBoundary>...</StickyBoundary>

| Parameter | Type | Description | Required | Deffault | | :---------- | :------------------------- | :---------------------------------------------- | -------- | -------- | | as | string or ReactElement | React Element used in display | false | div | | onStuck | (target)=>void | Callback when a child becomes Sticky | false | -------- | | onUnstuck | (target)=>void | Callback when a child is no longer Sticky | false | -------- | | onChange | ({target,type})=>void | Callback when a child changes it's Sticky State | false | -------- |

Sticky

Makes it's content Sticky

<Sticky>...</Sticky>

| Parameter | Type | Description | Required | Deffault | | :-------- | :------------------------- | :---------------------------- | -------- | -------- | | as | string or ReactElement | React Element used in display | false | div |

onStuck

Callback when a child becomes Sticky.

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

| Parameter | Type | Description | | :-------- | :---------- | :-------------------------- | | target | ReactNode | The Sticky Element Instance |

onUnstuck

Callback when a child is no longer Sticky.

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

| Parameter | Type | Description | | :-------- | :---------- | :-------------------------- | | target | ReactNode | The Sticky Element Instance |

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

| Parameter | Type | Description | | :-------- | :-------------------- | :-------------------------- | | target | ReactNode | The Sticky Element Instance | | type | 'stuck' | 'unstuck' | The Sticky Element Instance |

Used By

This project is used by the following Projects:

• Choc UI - Site search bar