react-tag-suggest

Tag auto suggest

Usage no npm install needed!

<script type="module">
  import reactTagSuggest from 'https://cdn.skypack.dev/react-tag-suggest';
</script>

README

React-Tag-Suggest

SemVer License Build Status

An auto suggest react component that displays an input field for queries. With each change of the query the suggester is fired and matching results displayed in a dropdown.

(The styling and functionality is still a bit raw in some places.)

Demo

Install

Install as node dependency:

npm install react-tag-suggest --save

Quickstart

To test locally change to node_modules/react-tag-suggest and run:

npm start & npm run watch

Commands

  • npm run build - build production css and js
  • npm run watch - compile css and js
  • npm run watch:test - run tests on change
  • npm start - start static dev server
  • npm test - run lint and tests

Usage

var React = require('react');
var tagSuggestComponent = require('react-tag-suggest');

// DEV START
var items = ['Java', 'Java Flash', 'JavaScript', 'Html', 'Java Script',
  'css', 'photoshop', 'project management', 'sales', 'photography',
  'football', 'dj', 'video editing', 'mac os x', 'Adobe Photoshop'];

function findSuggestions(query, callback) {
  // Some async action will happen here
  var res;
  if (!query || query.length < 2) {
    callback(null, []);
    return;
  }

  res = items.filter(function (item) {
    return item.toLowerCase().indexOf(query.toLowerCase().trim()) > -1;
  });

  callback(null, res);
}
// DEV END

var tagInput = React.render(React.createElement(tagSuggestComponent, {
  suggester: findSuggestions
}),
  document.querySelector('#content'));

Component Props

  • suggester: function with two arguments:

    • query: search query
    • callback: function with two arguments, error and result.

    The suggester would perform an async http request (ajax) and receive a result which it passes back to the component via the callback.

  • cssClass: optional css class

License

MIT