Nurturing Pluto's Martians

    @algolia/react-instantsearch-widget-loadmore-with-progressbar
    TypeScript icon, indicating that this package has built-in type declarations

    1.4.0 • Public • Published

    React InstantSearch

    React InstantSearch widget that displays a load more button with a progress bar.
    It works in conjuction with InfiniteHits widget for diplaying the hits.

    Example


    MIT NPM version

    Summary

    Get started

    Demo

    Demo on CodeSandbox.

    Installation

    npm install @algolia/react-instantsearch-widget-loadmore-with-progressbar
    # or
    yarn add @algolia/react-instantsearch-widget-loadmore-with-progressbar

    Usage

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { InstantSearch, SearchBox, Hits, Panel } from 'react-instantsearch-dom';
    import algoliasearch from 'algoliasearch/lite';
    import { LoadMoreWithProgressBar } from '@algolia/react-instantsearch-widget-loadmore-with-progressbar';
    import type { TextTranslationArgs } from '@algolia/react-instantsearch-widget-loadmore-with-progressbar';
    
    // Import default styles
    import '@algolia/react-instantsearch-widget-loadmore-with-progressbar/dist/style.css';
    
    const searchClient = algoliasearch('appId', 'apiKey');
    
    ReactDOM.render(
      <InstantSearch indexName="indexName" searchClient={searchClient}>
        <SearchBox />
        <InfiniteHits />
        <LoadMoreWithProgressBar
          translations={{
            loadMore: 'Load more',
            searchStalled: 'Loading...',
            text: ({ nbSeenHits, nbTotalHits }: TextTranslationArgs) =>
              `You've seen ${nbSeenHits} item${
                nbSeenHits > 1 ? 's' : ''
              } out of ${nbTotalHits}`,
          }}
        />
      </InstantSearch>,
      document.getElementById('root')
    );

    Styling

    The widget ships with default styles that you can import either from the NPM package or directly from a CDN like JSDelivr.

    import '@algolia/react-instantsearch-widget-loadmore-with-progressbar/dist/style.css';
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@algolia/react-instantsearch-widget-loadmore-with-progressbar/dist/style.css"
    />

    Note: This widget has its own load more button. If you use the InfiniteHits widget, a second load more button will show. You can hide it using this CSS rule:

    /* Hide InfiniteHits widget load more button but not LoadMoreWithProgressBar widget load more button */
    .ais-InfiniteHits-loadMore:not(.ais-LoadMoreWithProgressBar-loadMore) {
      display: none;
    }

    CSS variables

    The widget styles uses CSS variables that you can customize in your own CSS.
    You can override CSS variables using the .ais-LoadMoreWithProgressBar class.

    Name Type Description
    --bar-color color Progress bar background color.
    --value-color color Progress value background color.

    Requirements

    You will have to use the InfiniteHits widget to display the hits.
    This widget only displays a load more button and a progress bar.

    Options

    Option Type Required Default Description
    translations object false - A mapping of keys to translation values.
    buttonComponent React.ComponentType false - A custom show more React button component.
    className string false - Custom CSS classes.

    translations

    object

    A mapping of keys to translation values.

    • loadMore: the label of the “Show more” button.
    • searchStalled: the label of the “Show more” button when the search is stalled.
    • text: the text describing the current search progress. Accepts two number parameters:
      • nbSeenHits represents the number of hits already seen.
      • nbTotalHits represents the number of total hits in the current search state.
    <LoadMoreWithProgressBar
      translations={{
        loadMore: 'Load more',
        searchStalled: 'Loading...',
        text: ({ nbSeenHits, nbTotalHits }: TextTranslationArgs) =>
          `You've seen ${nbSeenHits} item${
            nbSeenHits > 1 ? 's' : ''
          } out of ${nbTotalHits}`,
      }}
    />

    buttonComponent

    React.ComponentType

    A custom show more React button component.

    • translations: the translations strings.
    • isSearchStalled: true if the search is stalled, false otherwise.
    • refineNext: a function to refine next hits.
    import type { ButtonComponentProps } from '@algolia/react-instantsearch-widget-loadmore-with-progressbar'
    
    const ButtonComponent = ({
      translations,
      isSearchStalled,
      refineNext,
    }: ButtonComponentProps) => {
      return (
        <button type="button" onClick={refineNext}>
          {isSearchStalled ? translations.searchStalled : translations.loadMore}
        </button>
      );
    };
    
    <LoadMoreWithProgressBar buttonComponent={ButtonComponent} />

    className

    string

    Custom CSS classes.

    <LoadMoreWithProgressBar className="my-class" />

    Example

    Clone this repository and go to the repo folder:

    git clone git@github.com:algolia/react-instantsearch-widget-loadmore-with-progressbar.git && \
    cd react-instantsearch-widget-loadmore-with-progressbar

    Install the dependencies and start the example:

    npm install && npm start
    # or
    yarn install && yarn start

    Then open http://localhost:3000/ to see the example in action.

    Browser support

    Same as React InstantSearch it supports the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

    Please refer to the browser support section in the documentation to use React InstantSearch and this widget on other browsers.

    Troubleshooting

    Encountering an issue? Before reaching out to support, we recommend heading to our FAQ where you will find answers for the most common issues and gotchas with the library.

    Contributing & Licence

    How to contribute

    We welcome all contributors, from casual to regular 💙

    • Bug report. Is something not working as expected? Send a bug report.
    • Feature request. Would you like to add something to the library? Send a feature request.
    • Documentation. Did you find a typo in the doc? Open an issue and we'll take care of it.
    • Development. If you don't know where to start, you can check the open issues that are tagged easy, the bugs or chores.

    To start contributing to code, you need to:

    1. Fork the project
    2. Clone the repository
    3. Install the dependencies: yarn
    4. Run the development mode: yarn start
    5. Open the project

    Please read our contribution process to learn more.

    Licence

    Licensed under the MIT license.


    About React InstantSearch

    React InstantSearch is a React library that lets you create an instant-search result experience using Algolia’s search API. It is part of the InstantSearch family:

    React InstantSearch | InstantSearch.js | Angular InstantSearch | Vue InstantSearch | InstantSearch Android | InstantSearch iOS

    This project was generated with create-instantsearch-app by Algolia.

    Install

    npm i @algolia/react-instantsearch-widget-loadmore-with-progressbar

    DownloadsWeekly Downloads

    326

    Version

    1.4.0

    License

    MIT

    Unpacked Size

    36.1 kB

    Total Files

    11

    Last publish

    Collaborators

    • fabienmotte
    • sarahdayan
    • dhaya.b
    • haroenv
    • francoischalifour
    • tkrugg