Pagefind-react NPM

pagefind-react

A pagefind react Component.

Getting Started

npm i pagefind-react --save

Setup the pagefind bundles in your layout or component.

// layout.tsx
import React from "react";

// use layout for scripts _pagefind
export function Layout({ children }) {
  return (
    <>
      <Head>
        <link
          href="/_pagefind/pagefind-ui.css"
          rel="stylesheet"
          key="pagefind-ui-css"
        />
        <script
          src="/_pagefind/pagefind-ui.js"
          type="text/javascript"
          key="pagefind-ui-js"
        />
      </Head>
      <main id="main-content" data-pagefind-body>
        {children}
      </main>
    </>
  );
}

// pages/index.tsx
import React from "react";
import { Layout } from "./layout";
import { PageFind } from "pagefind-react";

export function Home({ Component, pageProps }) {
  return (
    <>
      <h1>Home Page</h1>
      <PageFind />
    </>
  );
}

Home.getLayout = Layout;

// _app.js

export default function MyApp({ Component, pageProps }) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page);

  return getLayout(<Component {...pageProps} />);
}

Dark Mode

If you need to handle themes include the following css before _/pagefind/pagefind-ui.css.

Inside your public folder add the following file css/_pagefind.css with the markup.

:root {
  --pagefind-ui-scale: 1;
  --pagefind-ui-primary: #034ad8;
  --pagefind-ui-text: #393939;
  --pagefind-ui-background: #ffffff;
  --pagefind-ui-border: #eeeeee;
  --pagefind-ui-tag: #eeeeee;
  --pagefind-ui-border-width: 2px;
  --pagefind-ui-border-radius: 8px;
  --pagefind-ui-image-border-radius: 8px;
  --pagefind-ui-image-box-ratio: 3 / 2;
  --pagefind-ui-font: sans-serif;
  --pagefind-ui-placeholder: #000;
}

:root.dark {
  --pagefind-ui-primary: #eeeeee;
  --pagefind-ui-text: #eeeeee;
  --pagefind-ui-background: #152028;
  --pagefind-ui-border: #152028;
  --pagefind-ui-tag: #152028;
  --pagefind-ui-placeholder: #fff;
}

.pagefind-ui__search-input::placeholder {
  color: var(--pagefind-ui-placeholder);
  opacity: 1;
}

Next include the css before pagefind <link href="/css/_pagefind.css" rel="stylesheet" />.

pagefind pagefind-react

react react-dom

@everything-registry/sub-chunk-2403

0.0.1

10 months ago