reactjs-debounce/dist/index.modern.js

react package for debounce searching in reactjs

import React, { useState, useEffect, useCallback } from 'react';
import debounce from 'lodash.debounce';

var styles = {"test":"_3ybTi"};

function useDebounce(callback, delay) {
  var debouncedFn = useCallback(debounce(function () {
    return callback.apply(void 0, arguments);
  }, delay), [delay]);
  return debouncedFn;
}

var ExampleComponent = function ExampleComponent(_ref) {
  var text = _ref.text;
  return /*#__PURE__*/React.createElement("div", {
    className: styles.test
  }, "Example Component: ", text);
};
var DebounceSearch = function DebounceSearch(_ref2) {
  var searchText = _ref2.searchText,
      onDebounce = _ref2.onDebounce;

  var _useState = useState(''),
      inputValue = _useState[0],
      setInputValue = _useState[1];

  var _useState2 = useState(''),
      outputValue = _useState2[0],
      setOutputValue = _useState2[1];

  var debouncedSave = useDebounce(function (nextValue) {
    return setOutputValue(nextValue);
  }, 300);
  useEffect(function () {
    debouncedSave(searchText);
    setInputValue(searchText);
  }, [searchText]);
  useEffect(function () {
    onDebounce(outputValue);
  }, [outputValue]);

  var handleChange = function handleChange(event) {
    var nextValue = event.target.value;
    setInputValue(nextValue);
    debouncedSave(nextValue);
  };

  return /*#__PURE__*/React.createElement("input", {
    type: "text",
    className: "debounce-search",
    value: inputValue,
    onChange: handleChange
  });
};

export { DebounceSearch, ExampleComponent };
//# sourceMappingURL=index.modern.js.map