Skip to content

Commit

Permalink
docs(examples): update React renderer example
Browse files Browse the repository at this point in the history
  • Loading branch information
@francoischalifour
francoischalifour committed Feb 4, 2021
1 parent 2d7762d commit 18d48c4
Show file tree
Hide file tree
Showing 6 changed files with 196 additions and 34 deletions.
3 changes: 2 additions & 1 deletion examples/react-renderer/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,8 @@
"@algolia/autocomplete-core": "1.0.0-alpha.40",
"@algolia/autocomplete-preset-algolia": "1.0.0-alpha.40",
"@algolia/autocomplete-theme-classic": "1.0.0-alpha.40",
"algoliasearch": "4.8.3",
"@algolia/client-search": "4.8.4",
"algoliasearch": "4.8.4",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-scripts": "4.0.1"
Expand Down
2 changes: 1 addition & 1 deletion examples/react-renderer/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import './App.css';
export function App() {
return (
<div className="container">
<Autocomplete openOnFocus={true} debug={true} />
<Autocomplete placeholder="Search" openOnFocus={true} debug={true} />
</div>
);
}
63 changes: 45 additions & 18 deletions examples/react-renderer/src/Autocomplete.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {
createAutocomplete,
} from '@algolia/autocomplete-core';
import { getAlgoliaHits } from '@algolia/autocomplete-preset-algolia';
import { Hit } from '@algolia/client-search';
import algoliasearch from 'algoliasearch/lite';
import React from 'react';

Expand All @@ -15,15 +16,13 @@ const searchClient = algoliasearch(
'6be0576ff61c053d5f9a3225e2a90f76'
);

type AutocompleteItem = {
type AutocompleteItem = Hit<{
objectID: string;
query: string;
_highlightResult: {
query: {
value: string;
};
};
};
name: string;
description: string;
image: string;
url: string;
}>;

export function Autocomplete(
props: Partial<AutocompleteOptions<AutocompleteItem>>
Expand Down Expand Up @@ -53,35 +52,37 @@ export function Autocomplete(
getSources() {
return [
{
getItemInputValue({ item }) {
return item.query;
},
getItems({ query }) {
return getAlgoliaHits({
searchClient,
queries: [
{
indexName: 'instant_search_demo_query_suggestions',
indexName: 'instant_search',
query,
params: {
hitsPerPage: 5,
highlightPreTag: '<mark>',
highlightPostTag: '</mark>',
attributesToSnippet: ['name:10', 'description:35'],
snippetEllipsisText: '…',
},
},
],
});
},
getItemUrl({ item }) {
return item.url;
},
},
];
},
...props,
}),
[props]
);
const inputRef = React.useRef<HTMLInputElement | null>(null);
const formRef = React.useRef<HTMLFormElement | null>(null);
const panelRef = React.useRef<HTMLDivElement | null>(null);
const inputRef = React.useRef<HTMLInputElement>(null);
const formRef = React.useRef<HTMLFormElement>(null);
const panelRef = React.useRef<HTMLDivElement>(null);
const { getEnvironmentProps } = autocomplete;

React.useEffect(() => {
Expand Down Expand Up @@ -157,17 +158,43 @@ export function Autocomplete(
className="aa-Item"
{...autocomplete.getItemProps({ item, source })}
>
<div className="aa-ItemIcon aa-ItemIcon--no-border">
<SearchIcon />
<div className="aa-ItemIcon">
<img
src={item.image}
alt={item.name}
width="40"
height="40"
/>
</div>
<div className="aa-ItemContent">
<div
className="aa-ItemContentTitle"
dangerouslySetInnerHTML={{
__html: item._highlightResult.query.value,
__html: item._snippetResult!.name.value,
}}
/>
<div
className="aa-ItemContentDescription"
dangerouslySetInnerHTML={{
__html: item._snippetResult!.description
.value,
}}
/>
</div>
<button
className="aa-ItemActionButton aa-TouchOnly aa-ActiveOnly"
type="button"
title="Select"
>
<svg
fill="currentColor"
viewBox="0 0 24 24"
width="20"
height="20"
>
<path d="M18.984 6.984h2.016v6h-15.188l3.609 3.609-1.406 1.406-6-6 6-6 1.406 1.406-3.609 3.609h13.172v-4.031z"></path>
</svg>
</button>
</li>
);
})}
Expand Down
16 changes: 9 additions & 7 deletions examples/react-renderer/src/ResetIcon.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,17 @@ import React from 'react';

export function ResetIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg width="20" height="20" viewBox="0 0 20 20" {...props}>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="currentColor"
{...props}
>
<path
d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z"
fill="none"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.4"
clipRule="evenodd"
/>
</svg>
);
Expand Down
22 changes: 15 additions & 7 deletions packages/website/docs/creating-a-renderer.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,23 +44,25 @@ function Autocomplete() {
return [
// (3) Use an Algolia index source.
{
getItemInputValue({ item }) {
return item.query;
},
getItems({ query }) {
return getAlgoliaHits({
searchClient,
queries: [
{
indexName: 'instant_search_demo_query_suggestions',
indexName: 'instant_search',
query,
params: {
hitsPerPage: 4,
highlightPreTag: '<mark>',
highlightPostTag: '</mark>',
},
},
],
});
},
getItemUrl({ item }) {
return item.url;
},
},
];
},
Expand Down Expand Up @@ -108,7 +110,7 @@ function Autocomplete() {
source,
})}
>
{item.query}
{item.name}
</li>
))}
</ul>
Expand Down Expand Up @@ -166,10 +168,12 @@ function Autocomplete() {
className="aa-Form"
{...autocomplete.getFormProps({ inputElement: inputRef.current })}
>
<div className="aa-InputWrapper">
<div className="aa-InputWrapperPrefix">
<label className="aa-Label" {...autocomplete.getLabelProps({})}>
Search
</label>
</div>
<div className="aa-InputWrapper">
<input
className="aa-Input"
ref={inputRef}
Expand All @@ -195,15 +199,19 @@ function Autocomplete() {
className="aa-Form"
{...autocomplete.getFormProps({ inputElement: inputRef.current })}
>
<div className="aa-InputWrapper">
<div className="aa-InputWrapperPrefix">
<label className="aa-Label" {...autocomplete.getLabelProps({})}>
Search
</label>
</div>
<div className="aa-InputWrapper">
<input
className="aa-Input"
ref={inputRef}
{...autocomplete.getInputProps({})}
/>
</div>
<div className="aa-InputWrapperSuffix">
<button className="aa-ResetButton" type="reset">
ｘ
</button>
Expand Down
Loading

0 comments on commit 18d48c4

Please sign in to comment.