Logo
hummingbird

Gatsby

Quick guide to integrate Hummingbird UI with Gatsby. Wrap all pages in a provider that dynamically loads only the required scripts, keeping performance fast and bundle size small.

Initialization

Set up a wrapper component to load Hummingbird scripts dynamically on route changes.

// src/components/HummingbirdUI.tsx
import React, { PropsWithChildren, useEffect } from "react";
import { useLocation } from "@reach/router";

const HummingbirdUI = ({ children }: PropsWithChildren) => {
  const location = useLocation();

  useEffect(() => {
    import("@hummingbirdui/hummingbird");
  }, [location.pathname]);

  return <>{children}</>;
};

export default HummingbirdUI;

Configure Gatsby to wrap every page with the Hummingbird provider for global availability.

Edit gatsby-browser.js:

// gatsby-browser.js
import React from "react";
import HummingbirdUI from "./src/components/HummingbirdUI";

export function wrapPageElement({ element, props }) {
  return <HummingbirdUI {...props}>{element}</HummingbirdUI>;
}
Optimization

Import only the scripts you need (e.g., modal, dropdown) to improve performance and reduce bundle size.

// src/components/HummingbirdUI.tsx
import React, { PropsWithChildren, useEffect } from "react";
import { useLocation } from "@reach/router";

const HummingbirdUI = ({ children }: PropsWithChildren) => {
  const location = useLocation();

  useEffect(() => {
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/alert');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/button');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/carousel');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/collapse');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/dropdown');
    import('@hummingbirdui/hummingbird/lib/esm/scripts/modal');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/offcanvas');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/popover');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/scrollspy');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tab');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/toast');
    // import('@hummingbirdui/hummingbird/lib/esm/scripts/tooltip');
  }, [location.pathname]);

  return <>{children}</>;
};

export default HummingbirdUI;