Biblioteca de componentes de interface do usuário Instantsearch para React

O que é o Algolia?

A Algolia permite que desenvolvedores modernos criem experiências de pesquisa e descoberta de nível internacional sem a necessidade de DevOps.
Bibliotecas para todas as principais linguagens e frameworks facilitam o aprimoramento da experiência dos seus usuários.

Adicione o preenchimento automático às suas aplicações React

A biblioteca React InstantSearch UI oferece widgets de interface do usuário pré-construídos, personalizáveis e flexíveis para você criar suas próprias experiências de pesquisa —explore a galeria de exemplos. Ela possui recursos de renderização no lado do servidor e de roteamento, além de ser de código aberto, pronta para produção e mantida pela Algolia.

Recursos

Oferece componentes de interface do usuário pré-criados, seguindo os princípios das melhores práticas do React, que permanecem independentes de frameworks externos
Integre ao seu aplicativo ou interface de usuário existente, ou use os modelos do InstantSearch
Vem com um tema CSS padrão, totalmente personalizável
Gerencia toda a lógica de negócios para solicitações de busca, respostas e estados
Personalização progressiva de componentes (usar, ampliar ou personalizar)

Versão

Compatível com todas as versões atuais da biblioteca React subjacente
O código é totalmente de código aberto e está disponível no GitHub
Inicie sua aplicação com o `create-instantsearch-app`, o NPM, ...

Integrações relacionadas

Funciona como preenchimento automático
E com todos os nossosclientes de APIeframeworks

Links importantes

Comece agora

CSS (CRIE UMA CONTA GRATUITAAQUI)

          
            body { font-family: sans-serif; padding: 1em; }

.ais-SearchBox { margin: 1em 0; }

.ais-Pagination { margin-top: 1em }

.left-panel { float: left; width: 250px; }

.right-panel { margin-left: 260px; }

IMPORTAR COMPONENTES

          
            import {

  InstantSearch,

  Highlight,

  Hits,

  SearchBox,

} from 'react-instantsearch-hooks-web';

PESQUISAR

          
            // Create the App component

class App extends Component {

  render() {

    return (

      <div className="ais-InstantSearch">

        <h1>React InstantSearch e-commerce demo</h1>

        <InstantSearch indexName="demo_ecommerce" searchClient={searchClient}>

          <div className="right-panel">

            <SearchBox />

            <Hits hitComponent={Hit} />

          </div>

        </InstantSearch>

      </div>

    );

  }

}



function Hit(props) {

  return (

    <div>

      <img src={props.hit.image} align="left" alt={props.hit.name} />

      <div className="hit-name">

        <Highlight attribute="name" hit={props.hit} />

      </div>

      <div className="hit-description">

        <Highlight attribute="description" hit={props.hit} />

      </div>

      <div className="hit-price">${props.hit.price}</div>

    </div>

  );

}

Algolia Assist

Em que posso ajudá-lo hoje?

React + Algolia