Adhesive

Adhesive is a modern, performant, lightweight, dependency free library that provides advanced sticky positioning for web elements with cross-platform compatibility and framework-specific adapters.

✨ Features

• 🚀 Modern - Built with TypeScript, distributed as ESM only
• 📦 Lightweight - Zero dependencies, minimal bundle size
• 🔧 Flexible - Supports top/bottom positioning with customizable offsets and boundaries
• ⚡️ Performant - Optimized for smooth scrolling with efficient DOM updates
• 🎯 Type Safe - Full TypeScript support with comprehensive type definitions
• 🌍 Cross Platform - Works across all modern browsers and devices
• 🎨 Framework Ready - Core library with framework specific adapters
• 🖥️ SSR Friendly - Handles server-side rendering environments gracefully

📦 Packages

This monorepo contains multiple packages for different use cases:

Package	Description	README	NPM	JSR
@adhesivejs/core	Core library	📖 README
@adhesivejs/react	React adapter	📖 README
@adhesivejs/svelte	Svelte adapter	📖 README
@adhesivejs/vue	Vue adapter	📖 README

🏎️ Quick Install

# core
npx nypm install @adhesivejs/core

# react
npx nypm install @adhesivejs/react

# svelte
npx nypm install @adhesivejs/svelte

# vue
npx nypm install @adhesivejs/vue

🎨 Usage

Core (Vanilla JavaScript/TypeScript)

import { Adhesive } from "@adhesivejs/core";

Adhesive.create({ targetEl: "#target-element" });

React Examples

React Component Example

import { AdhesiveContainer } from "@adhesivejs/react";

export function Component() {
  return (
    <div>
      <AdhesiveContainer position="top">
        <header>This header will stick to the top</header>
      </AdhesiveContainer>

      <main>
        <p>Your main content here...</p>
      </main>
    </div>
  );
}

React Hook Example

import { useAdhesive } from "@adhesivejs/react";
import { useRef } from "react";

export function Component() {
  const targetRef = useRef<HTMLElement>(null);

  useAdhesive(targetRef, { position: "top" });

  return (
    <div>
      <header ref={targetRef}>This header will stick to the top</header>

      <main>
        <p>Your main content here...</p>
      </main>
    </div>
  );
}

Svelte Examples

Svelte Attachment Example

<script lang="ts">
  import { adhesive } from "@adhesivejs/svelte";
</script>

<header {@attach adhesive({ position: "top" })}>
  This header will stick to the top
</header>

<main>
  <p>Your main content here...</p>
</main>

Vue Examples

Vue Component Example

<script setup lang="ts">
import { AdhesiveContainer } from "@adhesivejs/vue";
</script>

<template>
  <div>
    <AdhesiveContainer position="top">
      <header>This header will stick to the top</header>
    </AdhesiveContainer>

    <main>
      <p>Your main content here...</p>
    </main>
  </div>
</template>

Vue Composable Example

<script setup lang="ts">
import { useAdhesive } from "@adhesivejs/vue";
import { useTemplateRef } from "vue";

const targetRef = useTemplateRef("target");

useAdhesive(targetRef, () => ({ position: "top" }));
</script>

<template>
  <div>
    <header ref="target">This header will stick to the top</header>

    <main>
      <p>Your main content here...</p>
    </main>
  </div>
</template>

Vue Directive Example

<script setup lang="ts">
import { vAdhesive } from "@adhesivejs/vue";
</script>

<template>
  <div>
    <header v-adhesive>This header will stick to the top</header>

    <main>
      <p>Your main content here...</p>
    </main>
  </div>
</template>

🏗️ Development

This project uses pnpm workspaces for monorepo management.

# Install dependencies
pnpm install

# Build all packages
pnpm build

# Run tests
pnpm test

# Start development playgrounds
pnpm playground:core   # Core playground
pnpm playground:react  # React playground
pnpm playground:svelte # Svelte playground
pnpm playground:vue    # Vue playground

# Lint all packages
pnpm lint

# Type check all packages
pnpm type-check

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.