ahooks#useThrottle TypeScript Examples

The following examples show how to use ahooks#useThrottle. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.tsx    From bext with MIT License 5 votes vote down vote up 
HomePage: FC = () => {
  useTitle('首页');
  const { metaList } = useMeta();
  const [searchText, setSearchText] = useState('');
  const throttledText = useThrottle(searchText, { wait: 500 });
  const searchResult = useMemo(
    () =>
      metaList.filter(({ name, synopsis, id }) => {
        const text = throttledText.toLowerCase();
        return (
          id?.toLowerCase()?.includes(text) ||
          name?.toLowerCase()?.includes(text) ||
          synopsis?.toLowerCase()?.includes(text)
        );
      }),
    [throttledText, metaList],
  );

  useEffect(() => {
    if (throttledText) {
      trackEvent(Events.search, throttledText);
    }
  }, [throttledText]);

  return (
    <div className="pt-4 px-6">
      <SearchBox
        placeholder="搜索脚本（匹配ID、名称与简介）"
        underlined
        value={searchText}
        onChange={(e) => setSearchText(e?.target.value || '')}
      />
      {throttledText ? (
        searchResult.length ? (
          <MetaList list={searchResult} />
        ) : (
          <div className="text-center pt-7">哦豁，没有找到</div>
        )
      ) : (
        <>
          <TagList />
          <HottestLatest />
        </>
      )}
    </div>
  );
}