@tsproxy/react

Headless React components for tsproxy with a BaseUI-style overrides pattern.

This project is in early release — APIs are stabilizing.

Install

npm install @tsproxy/react @tsproxy/js react-instantsearch

Usage

import { SearchProvider, SearchBox, Hits, RefinementList, Pagination, Stats } from "@tsproxy/react";
import { Configure } from "react-instantsearch";

export default function SearchPage() {
  return (
    <SearchProvider serverUrl="http://localhost:3000" indexName="products">
      <Configure hitsPerPage={12} />
      <SearchBox placeholder="Search..." />
      <Stats />
      <RefinementList attribute="category" />
      <Hits hitComponent={({ hit }) => <div>{hit.name}</div>} />
      <Pagination />
    </SearchProvider>
  );
}

Overrides

Every component accepts an overrides prop to customize any sub-element:

<SearchBox
  overrides={{
    Input: { props: { className: "rounded-full border px-4 py-2" } },
    SubmitButton: { props: { hidden: true } },
    ResetButton: { component: MyResetButton },
  }}
/>

Components

| Component | Sub-elements | |-----------|-------------| | SearchBox | Root, Form, Input, SubmitButton, ResetButton | | Hits | Root, List, Item | | RefinementList | Root, List, Item, Label, Checkbox, LabelText, Count | | Pagination | Root, List, Item, Link | | Stats | Root, Text | | SortBy | Root, Select, Option | | NoResults | Root, Title, Message | | HitsSkeleton | Root, List, Item | | LocaleSelector | Root, Select, Option | | SearchProvider | — (wraps InstantSearch) |

Documentation

tsproxy.akshit.io

License

MIT