‚̧Neutrinos Peludos Magn√©ticos

    This package has been deprecated

    Author message:

    This name has a typo, instead use https://yarn.pm/instantsearch-tagsbox-react

    instansearch-tagsbox-react

    1.2.0¬†‚Äʬ†Public¬†‚Äʬ†Published

    TagsBox Widget

    ūüé• See it Live on CodeSandbox

    Demo

    Demo of TagsBox Widget

    Description

    This is the TagsBox Labs widget for React InstantSearch. You can use this widget to search and select tags with Algolia and use them later on for any purpose want.

    This widget displays an input that will offer tag suggestions while user is typing. Tags can be then clicked to be added to the input.

    This helps user to select records for another purpose than searching through them but to reuse them to complete another action later (like choosing a contact for sending an email or a category while creating a blog post for instance).

    Table of Contents

    Get the code

    This widget comes with JavaScript but also pre-defined CSS.

    JavaScript

    You can copy and paste the JavaScript code from the repository itself, grab it in the src/lib folder and use the <Tag /> component.

    CSS

    You can copy and paste the necessary CSS code from the repository itself, grab it in src/lib/Tags.css.

    Usage

    The simplest usage is:

    import { InstantSearch } from 'react-instantsearch-dom';
    import TagsBox from 'instansearch-tagsbox-react';
     
    export const SelectedTagComponent = ({ hit }) => (
        <Fragment>
            {hit.lastname}
        </Fragment>
    );
     
    export const SuggestedTagComponent = ({ hit }) => (
        <Fragment>
            {hit.firstname} {hit.lastname}
        </Fragment>
    );
     
    <InstantSearch
        appId="..."
        apiKey="..."
        indexName="..."
    >
        <TagsBox
            selectedTagComponent={SelectedTagComponent}
            suggestedTagComponent={SuggestedTagComponent}
            onUpdate={(newTags, previousTags) => console.log(newTags, previousTags)}
            translations={{ placeholder: "Search…", noResult: "…" }}
        />
    </InstantSearch>

    Requirements

    You should encapsulate the <TagsBox /> component inside an <InstantSearch /> one.

    To work properly, you'll need to provide three props to the component:

    • selectedTagComponent (component): describe how a selected tag should be displayed
      • receive a hit as parameter (coming from Algolia)
    • suggestedTagComponent (component): describe how a suggested tag should be displayed
      • receive a hit as parameter (coming from Algolia)
    • onUpdate (function): called each time a tag is added or removed
      • receive two parameters that represents the new tags and the previous tags. They are both arrays that respectively contains the current selected tags and the previous ones

    It is possible to encapsulate the <TagBox /> component in an <Index /> one if you wish to target different indices from the same InstantSearch instance.

    Examples

    • using the connectAutoComplete() connector: CodeSandbox

    Props

    Name Type Use
    selectedTagComponent (required) Component Describe how a selected tag should be displayed.
    suggestedTagComponent (required) Component Describe how a suggested tag should be displayed.
    onUpdate (required) Function Called each time a tag is added or removed.
    NoResultComponent Component Describe how an no existing tag should be displayed (should be use with onAddTag prop).
    onAddTag Function Called before a tag is added to manipulate the object. It takes either a hit (object) or a value (string) as parameter and should always return an object with a objectID value.
    translations Object Set the placeholder and noResult translations.
    limitTo Number Restrict the number of tags to select.

    Implementation details

    This widget is implemented using the connectAutoComplete() connector. To learn more about connectors, you can read the associated guide.

    Contributing

    To contribute to the project, clone this repository then run:

    yarn
    yarn start

    Keywords

    none

    Install

    npm i instansearch-tagsbox-react

    DownloadsWeekly Downloads

    15

    Version

    1.2.0

    License

    none

    Unpacked Size

    29.2 kB

    Total Files

    8

    Last publish

    Collaborators

    • emmanuel.fortin
    • ejaldorau
    • dhaya.b
    • spy-seth
    • alejandrouda
    • lukyvj
    • sepehrf
    • kosai106
    • marielaure
    • mthuret
    • haroenv
    • rayrutjes
    • speedblue
    • jerska
    • raphi
    • cbaptiste
    • ronanlevesque
    • samouss
    • therealwebby
    • francoischalifour
    • jonmontane
    • valentindotxyz
    • shipow
    • tkrugg
    • seafoox
    • sylvainh
    • clemfromspace
    • lorrissaintgenez
    • broujo
    • marieglr
    • e-krebs
    • eunjae-lee
    • kombucha
    • h1fra
    • sylvain
    • crawler-team
    • amcdaid106
    • devinalgolia
    • jvenezia
    • otomatik
    • julienbourdeau
    • sophiem03
    • mschreiber
    • sarahdayan
    • alexandremeunier
    • dcoates
    • maximehuang
    • guitek
    • matthewbond
    • cyril.descossy
    • tatsuro
    • danajeremy
    • mathougui
    • xavdh
    • agdavid
    • rasemotte
    • plnech
    • shortcuts
    • praagyajoshi
    • loicsay
    • svensoldin
    • alphonseb
    • leodau
    • fabienmotte
    • sarahfranc
    • millotp