{"library":"react-instantsearch-core","title":"React InstantSearch Core","description":"React InstantSearch Core is a headless UI library for React applications, enabling developers to build highly customized, lightning-fast search interfaces powered by Algolia. It provides a set of renderless components and hooks that manage the search logic and state, abstracting away the complexities of interacting directly with the Algolia API. Unlike `react-instantsearch`, which offers pre-built DOM components, `react-instantsearch-core` focuses on providing low-level primitives suitable for both web and React Native projects, allowing maximum flexibility in UI implementation. The library is currently stable at version 7.29.0 and is actively maintained within the Algolia InstantSearch ecosystem, receiving frequent updates, typically monthly, to align with new features and improvements across the InstantSearch family of libraries. Its core differentiator lies in its headless nature, empowering developers to create unique search experiences without being constrained by opinionated UI components.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-instantsearch-core"],"cli":null},"imports":["import { InstantSearch } from 'react-instantsearch-core'","import { useInstantSearch } from 'react-instantsearch-core'","import { connectSearchBox } from 'react-instantsearch-core'","import { Hits } from 'react-instantsearch'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState, useEffect } from 'react';\nimport algoliasearch from 'algoliasearch';\nimport { InstantSearch, useInstantSearch } from 'react-instantsearch-core';\n\nconst searchClient = algoliasearch(\n  process.env.ALGOLIA_APP_ID ?? 'YOUR_APP_ID',\n  process.env.ALGOLIA_SEARCH_API_KEY ?? 'YOUR_SEARCH_API_KEY'\n);\nconst indexName = 'your_index_name';\n\nfunction CustomSearchBox() {\n  const { uiState, setUiState } = useInstantSearch();\n  const [query, setQuery] = useState(uiState.query || '');\n\n  useEffect(() => {\n    // Synchronize local query state with InstantSearch's UI state\n    if (uiState.query !== query) {\n      setQuery(uiState.query || '');\n    }\n  }, [uiState.query]);\n\n  const handleChange = (event) => {\n    const newQuery = event.target.value;\n    setQuery(newQuery);\n    setUiState(prevUiState => ({ ...prevUiState, query: newQuery }));\n  };\n\n  return (\n    <input\n      type=\"search\"\n      placeholder=\"Search...\"\n      value={query}\n      onChange={handleChange}\n      style={{ padding: '10px', width: '300px', marginBottom: '20px' }}\n    />\n  );\n}\n\nfunction CustomHits() {\n  const { results } = useInstantSearch();\n\n  return (\n    <div>\n      {results.hits.length > 0 ? (\n        <ul>\n          {results.hits.map(hit => (\n            <li key={hit.objectID} style={{ marginBottom: '10px' }}>\n              {/* Assuming your hits have a 'name' property */}\n              <h3>{hit.name}</h3>\n              <p>{hit.description}</p>\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <p>No results found.</p>\n      )}\n    </div>\n  );\n}\n\nfunction App() {\n  return (\n    <InstantSearch \n      searchClient={searchClient} \n      indexName={indexName}\n      initialUiState={{ [indexName]: { query: '' } }}\n    >\n      <h1>My Custom Search</h1>\n      <CustomSearchBox />\n      <CustomHits />\n    </InstantSearch>\n  );\n}\n\nexport default App;\n","lang":"typescript","description":"Demonstrates setting up InstantSearch with a custom search box and hits display using `useInstantSearch` hooks.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}