Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@react-hook/throttle

Package Overview
Dependencies
Maintainers
1
Versions
28
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@react-hook/throttle - npm Package Compare versions

Comparing version 2.1.4 to 2.2.0

dist/esm/index.mjs

96

dist/main/index.js

@@ -1,73 +0,69 @@

'use strict'
"use strict";
exports.__esModule = true
exports.default = exports.useThrottle = exports.useThrottleCallback = void 0
exports.__esModule = true;
exports.useThrottleCallback = useThrottleCallback;
exports.useThrottle = useThrottle;
var _react = _interopRequireDefault(require('react'))
var React = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : {default: obj}
}
var _latest = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("@react-hook/latest"));
const {useEffect, useCallback, useState, useRef} = _react.default
const perf = typeof performance !== 'undefined' ? performance : Date
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const now = () => perf.now()
function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
const useThrottleCallback = (callback, fps = 30, leading = false) => {
const storedCallback = useRef(callback)
storedCallback.current = callback
const wait = 1000 / fps
const prev = useRef(0)
const trailingTimeout = useRef(void 0)
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const clearTrailing = () => clearTimeout(trailingTimeout.current)
const perf = typeof performance !== 'undefined' ? performance : Date;
const deps = [fps, leading] // Reset any time the deps change
const now = () => perf.now();
function useThrottleCallback(callback, fps = 30, leading = false) {
const storedCallback = (0, _latest.default)(callback);
const ms = 1000 / fps;
const prev = React.useRef(0);
const trailingTimeout = React.useRef();
const clearTrailing = () => trailingTimeout.current && clearTimeout(trailingTimeout.current);
const deps = [fps, leading, storedCallback]; // Reset any time the deps change
function _ref() {
prev.current = 0
clearTrailing()
prev.current = 0;
clearTrailing();
}
useEffect(() => _ref, deps)
return useCallback(function () {
React.useEffect(() => _ref, deps);
return React.useCallback(function () {
// eslint-disable-next-line prefer-rest-params
const args = arguments
const rightNow = now()
const args = arguments;
const rightNow = now();
const call = () => {
prev.current = rightNow
clearTrailing() // eslint-disable-next-line prefer-spread
prev.current = rightNow;
clearTrailing();
storedCallback.current.apply(null, args);
};
storedCallback.current.apply(null, args)
}
const current = prev.current; // leading
const current = prev.current // leading
if (leading && current === 0) return call(); // body
if (leading && current === 0) return call() // body
if (rightNow - current > wait) {
if (current > 0) return call()
prev.current = rightNow
if (rightNow - current > ms) {
if (current > 0) return call();
prev.current = rightNow;
} // trailing
clearTrailing()
clearTrailing();
trailingTimeout.current = setTimeout(() => {
// eslint-disable-next-line prefer-spread
storedCallback.current.apply(null, args)
prev.current = 0
}, wait)
}, deps)
call();
prev.current = 0;
}, ms);
}, deps);
}
exports.useThrottleCallback = useThrottleCallback
const useThrottle = (initialState, fps, leading) => {
const ref = useState(initialState)
return [ref[0], useThrottleCallback(ref[1], fps, leading)]
}
exports.useThrottle = useThrottle
var _default = useThrottle
exports.default = _default
function useThrottle(initialState, fps, leading) {
const state = React.useState(initialState);
return [state[0], useThrottleCallback(state[1], fps, leading)];
}

@@ -1,57 +0,54 @@

import React from 'react'
const {useEffect, useCallback, useState, useRef} = React
const perf = typeof performance !== 'undefined' ? performance : Date
import * as React from 'react';
import useLatest from '@react-hook/latest';
const perf = typeof performance !== 'undefined' ? performance : Date;
const now = () => perf.now()
const now = () => perf.now();
export const useThrottleCallback = (callback, fps = 30, leading = false) => {
const storedCallback = useRef(callback)
storedCallback.current = callback
const wait = 1000 / fps
const prev = useRef(0)
const trailingTimeout = useRef(void 0)
export function useThrottleCallback(callback, fps = 30, leading = false) {
const storedCallback = useLatest(callback);
const ms = 1000 / fps;
const prev = React.useRef(0);
const trailingTimeout = React.useRef();
const clearTrailing = () => clearTimeout(trailingTimeout.current)
const clearTrailing = () => trailingTimeout.current && clearTimeout(trailingTimeout.current);
const deps = [fps, leading] // Reset any time the deps change
const deps = [fps, leading, storedCallback]; // Reset any time the deps change
function _ref() {
prev.current = 0
clearTrailing()
prev.current = 0;
clearTrailing();
}
useEffect(() => _ref, deps)
return useCallback(function () {
React.useEffect(() => _ref, deps);
return React.useCallback(function () {
// eslint-disable-next-line prefer-rest-params
const args = arguments
const rightNow = now()
const args = arguments;
const rightNow = now();
const call = () => {
prev.current = rightNow
clearTrailing() // eslint-disable-next-line prefer-spread
prev.current = rightNow;
clearTrailing();
storedCallback.current.apply(null, args);
};
storedCallback.current.apply(null, args)
}
const current = prev.current; // leading
const current = prev.current // leading
if (leading && current === 0) return call(); // body
if (leading && current === 0) return call() // body
if (rightNow - current > wait) {
if (current > 0) return call()
prev.current = rightNow
if (rightNow - current > ms) {
if (current > 0) return call();
prev.current = rightNow;
} // trailing
clearTrailing()
clearTrailing();
trailingTimeout.current = setTimeout(() => {
// eslint-disable-next-line prefer-spread
storedCallback.current.apply(null, args)
prev.current = 0
}, wait)
}, deps)
call();
prev.current = 0;
}, ms);
}, deps);
}
export const useThrottle = (initialState, fps, leading) => {
const ref = useState(initialState)
return [ref[0], useThrottleCallback(ref[1], fps, leading)]
}
export default useThrottle
export function useThrottle(initialState, fps, leading) {
const state = React.useState(initialState);
return [state[0], useThrottleCallback(state[1], fps, leading)];
}
{
"name": "@react-hook/throttle",
"version": "2.1.4",
"version": "2.2.0",
"homepage": "https://github.com/jaredLunde/react-hook/tree/master/packages/throttle#readme",
"repository": "github:jaredLunde/react-hook",
"bugs": "https://github.com/jaredLunde/react-hook/issues",
"author": "Jared Lunde <jared.lunde@gmail.com>",
"license": "MIT",

@@ -23,3 +24,4 @@ "description": "A React hook for throttling setState and other callbacks",

"module": "dist/module/index.js",
"source": "src/index.ts",
"unpkg": "dist/umd/use-throttle.js",
"source": "src/index.tsx",
"types": "types/index.d.ts",

@@ -31,51 +33,103 @@ "files": [

],
"exports": {
".": {
"browser": "./dist/module/index.js",
"import": "./dist/esm/index.mjs",
"require": "./dist/main/index.js",
"umd": "./dist/umd/use-throttle.js",
"source": "./src/index.tsx",
"types": "./types/index.d.ts",
"default": "./dist/main/index.js"
},
"./package.json": "./package.json",
"./": "./"
},
"sideEffects": false,
"scripts": {
"build": "npm run build-main && npm run build-module && npm run build-types",
"build-main": "npm run compile -- -d dist/main --env-name main",
"build-module": "npm run compile -- -d dist/module --env-name module",
"build-types": "tsc -p tsconfig.json -d --outDir types --emitDeclarationOnly",
"check-types": "tsc --noEmit -p tsconfig.json",
"compile": "babel src -x .ts,.tsx --ignore \"**/*.test.ts\",\"**/test.ts\",\"**/*.test.tsx\",\"**/test.tsx\" --delete-dir-on-start",
"format": "prettier --write \"**/*.{ts,tsx,js,jsx,md,yml,json,eslintrc,prettierrc}\"",
"build": "lundle build",
"check-types": "lundle check-types",
"dev": "lundle build -f module,cjs -w",
"format": "prettier --write \"{,!(node_modules|dist|coverage)/**/}*.{ts,tsx,js,jsx,md,yml,json}\"",
"lint": "eslint . --ext .ts,.tsx",
"prepublishOnly": "npm run lint && npm run test && npm run build && npm run format",
"test": "jest",
"validate": "npm run check-types && npm run lint && npm run test -- --coverage"
"validate": "lundle check-types && npm run lint && jest --coverage"
},
"husky": {
"hooks": {
"pre-commit": "npm run build-types && prettier --write \"types/**/*.ts\" && lint-staged"
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"**/*.{ts,js}": [
"**/*.{ts,tsx,js,jsx}": [
"lundle build -f types",
"eslint",
"prettier --write"
],
"**/*.{md,yml,json,eslintrc,prettierrc}": [
"**/*.{md,yml,json}": [
"prettier --write"
]
},
"eslintConfig": {
"extends": [
"lunde"
]
},
"eslintIgnore": [
"node_modules",
"coverage",
"dist",
"test",
"*.config.js"
],
"jest": {
"moduleDirectories": [
"node_modules",
"src",
"test"
],
"testMatch": [
"<rootDir>/src/**/?(*.)test.{ts,tsx}"
],
"collectCoverageFrom": [
"**/src/**/*.{ts,tsx}"
],
"setupFilesAfterEnv": [
"./test/setup.js"
],
"snapshotResolver": "./test/resolve-snapshot.js",
"globals": {
"__DEV__": true
}
},
"prettier": {
"semi": false,
"singleQuote": true,
"jsxSingleQuote": true,
"bracketSpacing": false
},
"devDependencies": {
"@lunde/babel-preset-es": "latest",
"@testing-library/react-hooks": "^3.2.1",
"@types/jest": "^25.2.1",
"@typescript-eslint/eslint-plugin": "^2.29.0",
"@typescript-eslint/parser": "^2.29.0",
"babel-plugin-optimize-react": "^0.0.4",
"cross-env": "^7.0.2",
"eslint": "^6.8.0",
"eslint-import-resolver-jest": "latest",
"eslint-plugin-jest": "^23.8.2",
"husky": "^4.2.5",
"jest": "^25.4.0",
"lint-staged": "^10.1.7",
"prettier": "^2.0.5",
"react": "^16.12.0",
"react-test-renderer": "^16.12.0",
"ts-jest": "^25.4.0",
"typescript": "^3.8.3"
"@testing-library/jest-dom": "latest",
"@testing-library/react": "latest",
"@testing-library/react-hooks": "latest",
"@testing-library/user-event": "latest",
"@types/jest": "latest",
"@types/react": "latest",
"@types/react-dom": "latest",
"babel-jest": "latest",
"eslint": "latest",
"eslint-config-lunde": "latest",
"husky": "latest",
"jest": "latest",
"lint-staged": "latest",
"lundle": "latest",
"prettier": "latest",
"react": "latest",
"react-dom": "latest",
"react-test-renderer": "latest",
"typescript": "latest"
},
"dependencies": {},
"dependencies": {
"@react-hook/latest": "^1.0.2"
},
"peerDependencies": {

@@ -82,0 +136,0 @@ "react": ">=16.8"

@@ -1,12 +0,11 @@

import {Dispatch, SetStateAction} from 'react'
export declare const useThrottleCallback: <CallbackArguments extends any[]>(
import * as React from 'react'
export declare function useThrottleCallback<CallbackArguments extends any[]>(
callback: (...args: CallbackArguments) => void,
fps?: number,
leading?: boolean
) => (...args: CallbackArguments) => void
export declare const useThrottle: <State>(
): (...args: CallbackArguments) => void
export declare function useThrottle<State>(
initialState: State | (() => State),
fps?: number | undefined,
leading?: boolean | undefined
) => [State, Dispatch<SetStateAction<State>>]
export default useThrottle
fps?: number,
leading?: boolean
): [State, React.Dispatch<React.SetStateAction<State>>]
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc