balazssagi / use-fuse Goto Github PK

View Code? Open in Web Editor NEW

7.0 7.0 1.0 2.52 MB

A tiny wrapper around the Fuse.js fuzzy-search library using React Hooks.

HTML 5.34% JavaScript 75.48% TypeScript 19.19%

fuzzy-search react

use-fuse's People

Stargazers

Watchers

Forkers

stungkit

use-fuse's Issues

More friendly use with [email protected]

The problem is fuse search result add item property wrapper.

// before seach
[
{
    "title": "The DaVinci Code",
    "author": {
      "firstName": "Dan",
      "lastName": "Brown"
    }
  },
]
// after search
[
  {
    "item": {
      "title": "The DaVinci Code",
      "author": {
        "firstName": "Dan",
        "lastName": "Brown"
      }
    },
    "refIndex": 6
  }
]

I recommand that we can extract result with reduce

//...
const results = React.useMemo(() => {
    return fuse.search(searchItem).reduce((acc, curr) => {
      if(curr.item) {
        acc.push(curr.item)
      }
      return acc
    }, [])
  }, [fuse, searchItem])

return results

Fuse options will cause hook to re-create fuse instance on every rerender

unless the consumer of the library memo-izes fuse-options https://github.com/balazssagi/use-fuse/blob/master/src/index.ts#L22, this will cause the Fuse instance to recreate on every single render.

My solution to this was to make fuseOptions an initial props, then wrap it in a state.

const [options, setOptions] = useState(initialOptions);
 const fuse = React.useMemo(() => {
        return new Fuse(list, options)
    }, [list, options])

Then to expose setOptions as a a public interface to allow the options to be dynamically reset after mount.

Recommend Projects