reactjs-debounce/dist/index.js

react package for debounce searching in reactjs

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var debounce = _interopDefault(require('lodash.debounce'));

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

function useDebounce(callback, delay) {
  var debouncedFn = React.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__default.createElement("div", {
    className: styles.test
  }, "Example Component: ", text);
};
var DebounceSearch = function DebounceSearch(_ref2) {
  var searchText = _ref2.searchText,
      onDebounce = _ref2.onDebounce;

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

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

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

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

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

exports.DebounceSearch = DebounceSearch;
exports.ExampleComponent = ExampleComponent;
//# sourceMappingURL=index.js.map