react-instantsearch-dom#Index JavaScript Examples
The following examples show how to use
react-instantsearch-dom#Index.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From emprezzo with MIT License | 6 votes |
|
export default function Search({ indices, collapse, homepage, hitsAsGrid, variation }) {
const ref = createRef()
const [query, setQuery] = useState(``)
const [focus, setFocus] = useState(false)
const searchClient = algoliasearch(
process.env.GATSBY_ALGOLIA_APP_ID,
process.env.GATSBY_ALGOLIA_SEARCH_KEY
)
useOnClickOutside(ref, () => setFocus(false))
return (
<Root ref={ref}>
<InstantSearch
searchClient={searchClient}
indexName={indices[0].name}
onSearchStateChange={({ query }) => setQuery(query)}
>
<Input onFocus={() => setFocus(true)} {...{ collapse, focus }} variation={variation} />
<HitsWrapper show={query.length > 0 && focus} asGrid={hitsAsGrid} homepage={homepage}>
{indices.map(({ name, title, type }) => (
<Index key={name} indexName={name}>
<header>
<h3>{title}</h3>
<Stats />
</header>
<Results />
<Hits type={type} onClick={() => setFocus(false)} />
</Index>
))}
</HitsWrapper>
</InstantSearch>
</Root>
)
}
Example #2
| Source File: NpoOrganizationDropdownField.js From website with MIT License | 5 votes |
|
NpoOrganizationDropdownField = ({ onSelected, error, label, disabled, value }) => {
const inputRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
const [selected, setSelected] = useState('');
useEffect(() => {
setSelected(value);
}, [value]);
return (
<InstantSearch searchClient={searchClient} indexName="organizations">
<Popover
isOpen={isOpen}
position={['bottom']}
disableReposition
onClickOutside={() => {
setIsOpen(false);
}}
containerStyle={{
zIndex: 1000,
width: '300px',
boxShadow: '0 8px 13px 0 rgba(44, 44, 45, 0.27)',
borderRadius: '5px',
position: 'fixed',
maxHeight: '400px',
overflowY: 'auto',
}}
align="start"
transitionDuration={0.1}
content={({ position, nudgedLeft, nudgedTop, targetRect, popoverRect }) => {
return (
<ContentContainer>
<>
<Index indexName="organizations">
<CustomHits
onClick={(name) => {
onSelected(name);
setSelected(name);
setIsOpen(false);
}}
/>
<Configure hitsPerPage={8} />
</Index>
</>
</ContentContainer>
);
}}
>
<div onClick={() => setIsOpen(true)}>
<CustomSearchBox inputRef={inputRef} error={error} label={label} disabled={disabled} value={selected} />
</div>
</Popover>
</InstantSearch>
);
}
Example #3
| Source File: index.js From website with MIT License | 5 votes |
|
NavSearchBarDropdownList = () => {
const inputRef = useRef(null);
const [isOpen, setIsOpen] = useState(false);
return (
<InstantSearch searchClient={searchClient} indexName="wishes">
<Popover
isOpen={isOpen}
position={['bottom']}
disableReposition
onClickOutside={() => setIsOpen(false)}
containerStyle={{
zIndex: 1000,
width: '350px',
boxShadow: '0 8px 13px 0 rgba(44, 44, 45, 0.27)',
borderRadius: '5px',
position: 'fixed',
}}
align="start"
transitionDuration={0.1}
content={({ position, nudgedLeft, nudgedTop, targetRect, popoverRect }) => {
return (
<ContentContainer>
<>
<Index indexName="wishes">
<Container>
<Text weight="bold">Wishes</Text>
</Container>
<CustomHits type="wishes" />
<Configure hitsPerPage={MAXIMUM_SEARCH_DESKTOP} />
</Index>
<Index indexName="donations">
<Container>
<Text weight="bold">Donations</Text>
</Container>
<CustomHits type="donations" />
<Configure hitsPerPage={MAXIMUM_SEARCH_DESKTOP} />
</Index>
</>
</ContentContainer>
);
}}
>
<div onClick={() => setIsOpen(true)}>
<CustomSearchBox inputRef={inputRef} />
</div>
</Popover>
</InstantSearch>
);
}
Example #4
| Source File: index.js From website with MIT License | 5 votes |
|
export default function Search({ indices, collapse, hitsAsGrid }) {
const [query, setQuery] = useState(``)
const [setFocus] = useState(false)
const searchClient = algoliasearch(
"V0X7Z4KE9D",
"544bec33383dc791bcbca3e1ceaec11b"
)
return (
<InstantSearch
searchClient={searchClient}
indexName={indices[0].name}
onSearchStateChange={({ query }) => {
if (typeof query !== "undefined") {
setQuery(query)
}
}}
>
<div tw="relative shadow appearance-none border rounded w-full py-3 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-inner rounded-r-none">
<SearchBox
tw="w-full px-8"
translations={{
placeholder: "Find analysis tools, formatters, and linters...",
}}
startValue=""
submit={
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 18 18"
>
<g
fill="none"
fillRule="evenodd"
stroke="currentColor"
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth="1.67"
transform="translate(1 1)"
>
<circle cx="7.11" cy="7.11" r="7.11" />
<path d="M16 16l-3.87-3.87" />
</g>
</svg>
}
/>
</div>
{query && (
<HitsWrapper
show={query.length > 0}
asGrid="false"
tw="max-h-screen overflow-scroll border shadow bg-white absolute w-full"
>
{indices.map(({ name, title, hitComp }) => (
<Index key={name} indexName={name}>
<Results>
<Hits hitComponent={hitComps[hitComp](() => setFocus(false))} />
</Results>
</Index>
))}
<PoweredBy />
</HitsWrapper>
)}
</InstantSearch>
)
}
Example #5
| Source File: index.js From learningHub with MIT License | 5 votes |
|
export default function SearchComponent({ indices, collapse, hitsAsGrid }) {
const ref = createRef();
const [query, setQuery] = useState(``);
const [focus, setFocus] = useState(false);
const searchClient = algoliasearch(
config.header.search.algoliaAppId,
config.header.search.algoliaSearchKey
);
useClickOutside(ref, () => setFocus(false));
const displayResult = query.length > 0 && focus ? 'showResults' : 'hideResults';
return (
<InstantSearch
searchClient={searchClient}
indexName={indices[0].name}
onSearchStateChange={({ query }) => setQuery(query)}
root={{ Root, props: { ref } }}
>
<Input onFocus={() => setFocus(true)} {...{ collapse, focus }} />
<HitsWrapper
className={'hitWrapper ' + displayResult}
show={query.length > 0 && focus}
asGrid={hitsAsGrid}
>
{indices.map(({ name, title, hitComp, type }) => {
return (
<Index key={name} indexName={name}>
<Results />
<Hits hitComponent={hitComps[hitComp](() => setFocus(false))} />
</Index>
);
})}
<PoweredBy />
</HitsWrapper>
<Configure hitsPerPage={5} />
</InstantSearch>
);
}
Example #6
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
SolutionList = ({
indexName,
searchState,
resultsState,
onSearchStateChange,
onSearchParameters,
widgetsCollector,
institutionId,
}) => {
const [searchLength, setSearchLength] = useState({
technology: 0,
service: 0,
});
const theme = useTheme();
const filters = `institution_id:"${institutionId}"`;
return (
<AlgoliaSearchProvider
indexName={indexName}
searchState={searchState}
resultsState={resultsState}
onSearchStateChange={onSearchStateChange}
onSearchParameters={onSearchParameters}
widgetsCollector={widgetsCollector}
>
<ThemeProvider>
<S.Wrapper>
<S.Container>
<S.Top>
<S.Title>Vitrine tecnológica</S.Title>
<DebouncedSearchBox placeholder="Qual solução você busca?" secondary />
<S.SortWrapper>
<HitsPerPage
items={[
{
label: `${ITEMS_PER_PAGE} resultados por página`,
value: ITEMS_PER_PAGE,
},
]}
defaultRefinement={ITEMS_PER_PAGE}
/>
</S.SortWrapper>
</S.Top>
<S.Content>
<Index indexName={algoliaDefaultConfig.technology.indexName}>
<Configure filters={filters} />
<Results
type="technology"
current={searchLength.technology}
onChange={setSearchLength}
/>
{!!searchLength.technology && (
<ScrollTo>
<SolutionsWrapper
containerPadding="3.2rem 0"
header="Tecnologias em destaque"
headerComponent="title"
headerProps={{
align: 'left',
color: theme.colors.silver,
centerInMobile: true,
}}
algoliaCustomCss={S.algoliaListCss}
overwriteAlgoliaStyles
>
<Hits
hitComponent={connectHits(({ hit }) => (
<SolutionCard type="technology" data={hit} />
))}
/>
</SolutionsWrapper>
<Pagination />
</ScrollTo>
)}
</Index>
<Index indexName={algoliaDefaultConfig.service.indexName}>
<Configure filters={filters} />
<Results
type="service"
current={searchLength.service}
onChange={setSearchLength}
/>
{!!searchLength.service && (
<ScrollTo>
<SolutionsWrapper
containerPadding="3.2rem 0"
header="Serviços em destaque"
headerComponent="title"
headerProps={{
align: 'left',
color: theme.colors.silver,
centerInMobile: true,
}}
algoliaCustomCss={S.algoliaListCss}
overwriteAlgoliaStyles
>
<Hits
hitComponent={connectHits(({ hit }) => (
<SolutionCard type="service" data={hit} />
))}
/>
</SolutionsWrapper>
<Pagination />
</ScrollTo>
)}
</Index>
</S.Content>
</S.Container>
</S.Wrapper>
</ThemeProvider>
</AlgoliaSearchProvider>
);
}
