use-throttled-effect - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2

package.json

		{
		"name": "use-throttled-effect",
		"version": "0.0.1",
		"version": "0.0.2",
		"description": "Throttled effect hook for react",
		@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

		@@ -1,2 +0,2 @@
		# useThrottle react hook
		# useThrottledEffect react hook

		@@ -6,3 +6,3 @@ Install it with yarn:
		```
		yarn add use-throttle
		yarn add use-throttled-effect
		```
		@@ -13,35 +13,28 @@
		```
		npm i use-throttle --save
		npm i use-throttled-effect --save
		```

		## Demo

		The simplest way to start playing around with use-throttle is with this CodeSandbox snippet:
		https://codesandbox.io/s/18yyn08y7

		## Simple Throttle

		According to https://twitter.com/dan_abramov/status/1060729512227467264

		#Example
		```javascript
		import React, { useState } from 'react';
		import { useThrottle } from 'use-throttle';
		import { useThrottledEffect } from 'use-throttled-effect';
		import useInterval from '@use-it/interval';

		export default function Input() {
		const [text, setText] = useState('Hello');
		const throttledText = useThrottle(text, 1000);
		const [count, setCount] = useState(0);

		useThrottledEffect(()=>{
		console.log(count)
		}, 1000,[count]);


		// Increment the counter.
		useInterval(() => {
		setCount(count + 1);
		}, 1000);

		return (
		<div>
		<input
		defaultValue={'Hello'}
		onChange={(e) => {
		setText(e.target.value);
		}}
		/>
		<p>Actual value: {text}</p>
		<p>Throttle value: {throttledText}</p>
		</div>
		{count}
		);
		}
		```

src/index.js

		import { useEffect, useRef } from 'react';

		export const useThrottledEffect = (callback, limit) => {
		export const useThrottledEffect = (callback, limit, deps = []) => {
		// const [throttledValue, setThrottledValue] = useState(value);
		@@ -20,4 +20,4 @@ const lastRan = useRef(Date.now());
		},
		[callback, limit]
		[limit, ...deps],
		);
		};

New alerts