Biblioteca de componentes de interfaz de usuario Instantsearch para React

¿Qué es Algolia?

Algolia permite a los desarrolladores modernos crear experiencias de búsqueda y descubrimiento de primer nivel sin necesidad de DevOps.
Las bibliotecas disponibles para los principales lenguajes y marcos de trabajo facilitan el enriquecimiento de la experiencia de tus usuarios.

Añade la función de autocompletado a tus aplicaciones de React

La biblioteca React InstantSearch UI ofrece widgets de interfaz de usuario predefinidos, personalizables y flexibles para crear tus propias experiencias de búsqueda:echa un vistazo a la galería de ejemplos. Cuenta con capacidades de renderización del lado del servidor y de enrutamiento; además, es de código abierto, está lista para su uso en producción y su mantenimiento corre a cargo de Algolia.

Características

Ofrece componentes de interfaz de usuario ya creados que siguen los principios de las mejores prácticas de React y que son independientes de los marcos de trabajo externos.
Intégralo en tu interfaz de usuario o aplicación actual, o utiliza las plantillas de InstantSearch
Incluye un tema CSS predeterminado, totalmente personalizable
Gestiona toda la lógica de negocio relacionada con las solicitudes de búsqueda, las respuestas y los estados
Personalización progresiva de los componentes (utilizar, ampliar o personalizar)

Versión

Compatible con todas las versiones actuales de la biblioteca React subyacente
El código es totalmente de código abierto y está disponible en GitHub.
Pon en marcha tu aplicación con create-instantsearch-app, npm, ...

Integraciones relacionadas

Funciona con la función deautocompletado
Y con todos nuestrosclientesymarcos de trabajo de API

Enlaces importantes

Empezar

CSS (CREA UNA CUENTA GRATUITAAQUÍ)

          
            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';

BUSCAR

          
            // 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

¿En qué puedo ayudarte hoy?

React + Algolia