@wayfarer-gl/react

React components and hooks for Wayfarer-GL. Build beautiful scrollytelling map experiences with ease.

Installation

npm install @wayfarer-gl/react @wayfarer-gl/core
# or
pnpm add @wayfarer-gl/react @wayfarer-gl/core

Features

• useWayfarer Hook: Orchestrates map instance creation and scroll-linked updates.
• MapSection Component: A semantic wrapper that triggers map camera movements via IntersectionObserver.
• Automatic Cleanup: Handles map destruction and event unbinding on component unmount.

Example

import { useWayfarer, MapSection } from "@wayfarer-gl/react";

function MyMapPage() {
  const { containerRef } = useWayfarer({
    data: myData,
    damping: 0.1,
  });

  return (
    <div>
      <div ref={containerRef} style={{ height: "100vh", position: "sticky" }} />

      <MapSection id="point-a">
        <h2>Point A</h2>
        <p>This content triggers the map to look at Point A.</p>
      </MapSection>
    </div>
  );
}