React & React Router Framework mode

This guide explains how to set up Hummingbird with React + Vite using Tailwind CSS. It covers project setup, configuration, and usage for quickly building and styling components in a React app.

Installation

1. Install Tailwind CSS

Follow the official installation guide to install Tailwind CSS in a React project.

2. Install Hummingbird

Install Hummingbird via preferred package manager:

npm install @hummingbirdui/hummingbird

3. Import CSS

Import Hummingbird styles in the main CSS file (e.g., index.css or app.css).

@import "tailwindcss";
@import "@hummingbirdui/hummingbird";

4. Initialize JS plugins

Initialize hummingbird at the root of the application, for example in App.js or App.tsx.

import { useEffect } from "react";
import { useLocation } from "react-router";

async function loadHummingbird() {
  return import("@hummingbirdui/hummingbird");
}

function App() {
  const location = useLocation();

  useEffect(() => {
    const initHummingbird = async () => {
      await loadHummingbird();
    };
    initHummingbird();
  }, [location.pathname]);

  return (
    ...
  );
}

export default App;

Optimization

To reduce the final bundle size, import only the specific JavaScript plugins that are needed. The example below demonstrates how to import only the modal script.

import { useEffect } from "react";
import { useLocation } from "react-router";

function loadHummingbird() {
  return Promise.all([
    // 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')
  ]);
}

function App() {
  const location = useLocation();

  useEffect(() => {
    const initHummingbird = async () => {
      await loadHummingbird();
    };
    initHummingbird();
  }, [location.pathname]);

  return (
    ...
  );
}

export default App;

JavaScript API

Hummingbird also provides a JavaScript API for programmatic control of components. For example, a modal can be toggled manually using the API.

Here’s how to initialize and use the Modal component:

import { useEffect, useState } from "react";
import { useLocation } from "react-router";
import type { ModalInstance } from "@hummingbirdui/hummingbird";

async function loadHummingbird() {
  return import("@hummingbirdui/hummingbird");
}

function Component() {
  const location = useLocation();
  const [myModal, setMyModal] = useState<ModalInstance>();

  useEffect(() => {
    const initModal = async () => {
      const { Modal } = await loadHummingbird();
      setMyModal(new Modal(".modal"));
    };
    initModal();
  }, [location.pathname]);

  const handleClick = () => {
    myModal?.toggle();
  };

  return (
    <div>
      <button className="btn btn-primary" onClick={handleClick}>Open</button>
      <div className="modal">...</div>
    </div>
  );
}

export default Component;