ffsstt/src/index.js

Une bibliothèque React pour le filtrage utilisant Fuse.js

import React, { useState } from 'react';
import Fuse from 'fuse.js';

const FiltrageFuse = ({ data, keys, options, placeholder = "Recherchez..." }) => {
  const [inputValue, setInputValue] = useState('');
  const [fuseResults, setFuseResults] = useState([]);

  const fuse = new Fuse(data, { keys, ...options });

  const onChangeInputValue = (e) => {
    const query = e.target.value;
    setInputValue(query);

    if (query.trim() === '') {
      setFuseResults([]);
    } else {
      const result = fuse.search(query);
      setFuseResults(result.map((res) => res.item));
    }
  };

  return (
    <div>
      <input
        value={inputValue}
        onChange={onChangeInputValue}
        placeholder={placeholder}
      />
      <ul>
        {fuseResults.length > 0 ? (
          fuseResults.map((item, index) => <li key={index}>{item.name}</li>)
        ) : (
          <li>Aucun résultat trouvé</li>
        )}
      </ul>
    </div>
  );
};

export default FiltrageFuse;