# pagefind-react
> A pagefind React Component drop-in
Latest version **0.0.1** (published 2023-07-14) · MIT license · 0 weekly downloads
## Install
```sh
npm install pagefind-react
pnpm add pagefind-react
yarn add pagefind-react
bun add pagefind-react
```
## Health
**Score 25/100 (F)** — status: abandoned.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.0.1 |
| Published | 2023-07-14 |
| First published | 2023-07-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 2 |
| Unpacked size | 7.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | j-mendez |
| Maintainers | jeffmendez |
| Keywords | pagefind, pagefind-react |
## Links
- npm: https://www.npmjs.com/package/pagefind-react
- npm.io page: https://npm.io/package/pagefind-react
## Dependencies (2)
- [react](https://npm.io/package/react.md) ^18.2.0
- [react-dom](https://npm.io/package/react-dom.md) ^18.2.0
## Recent versions
- 0.0.1 (latest) — 2023-07-14
## README
# pagefind-react
A pagefind react Component.
## Getting Started
`npm i pagefind-react --save`
Setup the pagefind bundles in your layout or component.
```tsx
// layout.tsx
import React from "react";
// use layout for scripts _pagefind
export function Layout({ children }) {
return (
<>
{children}
);
}
```
```tsx
// pages/index.tsx
import React from "react";
import { Layout } from "./layout";
import { PageFind } from "pagefind-react";
export function Home({ Component, pageProps }) {
return (
<>
Home Page
);
}
Home.getLayout = Layout;
```
```tsx
// _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();
}
```
## 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.
```css
: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 ``.
---
_Source: https://npm.io/package/pagefind-react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._