Replies: 2 comments
-
good point, it would make sense for breadcrumb to reset the page on refine, which I believe it currently doesn't (regardless of transformItems) |
Beta Was this translation helpful? Give feedback.
0 replies
-
With a custom Breadcrumb, you can create the situation you want, where both the query and page get reset whenever something is reset: import {
useBreadcrumb,
UseBreadcrumbProps,
useSearchBox,
} from 'react-instantsearch-hooks-web';
import {
Breadcrumb as BreadcrumbUiComponent,
BreadcrumbProps as BreadcrumbUiProps,
} from 'react-instantsearch-hooks-web/dist/es/ui/Breadcrumb';
type BreadcrumbUiProps = Pick<
BreadcrumbUiProps,
'items' | 'hasItems' | 'createURL' | 'onNavigate' | 'translations'
>;
type BreadcrumbProps = Omit<BreadcrumbUiProps, keyof UiProps> &
Omit<UseBreadcrumbProps, 'separator'> & {
translations?: Partial<UiProps['translations']>;
};
function Breadcrumb(props: BreadcrumbProps) {
const { canRefine, createURL, items, refine } = useBreadcrumb(props, {
$$widgetType: 'custom.breadcrumb',
});
const { query, refine: refineQuery } = useSearchBox(
{},
{ $$widgetType: 'custom.breadcrumb' }
);
const uiProps: UiProps = {
items: query
? [
...items.map(({ label }, i) => {
return {
label,
// we refine using the "next" value, as otherwise a step is missed
// if we are at the last value of the breadcrumb, you want to not refine
// this is because the value isn't set, it's toggled
value: items[i + 1]?.value ?? "__don't_refine__",
};
}),
{ label: `query: ${query}`, value: null },
]
: items,
hasItems: canRefine,
createURL,
onNavigate: (val: string | null) => {
refineQuery('');
if (val !== "__don't_refine__") {
refine(val);
}
},
translations: { rootElementText: 'Home' },
};
return <BreadcrumbUiComponent {...props} {...uiProps} />;
} https://codesandbox.io/s/nervous-ully-fhpnwf?file=/src/App.tsx The default behaviour is how it behaves, as the page only gets reset if the refinement is different than the one before |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
As the title says trying to get search Query in my breadcrumbs, currently have it working as such:
import { Breadcrumb } from 'react-instantsearch-hooks-web';
import {BreadcrumbConnectorParamsItem} from "instantsearch.js/es/connectors/breadcrumb/connectBreadcrumb";
import {TransformItemsMetadata} from "instantsearch.js";
const transformItems = (items: BreadcrumbConnectorParamsItem[], metadata: TransformItemsMetadata) => {
return !!metadata?.results?.query ? [...items, {...items[0], label:'Search results: ''+ metadata.results.query+'''}] : items;
};
However the "home" doesnt reset the page if there are any solutions
Beta Was this translation helpful? Give feedback.
All reactions