Skip to content
Permalink
Browse files

🤖 Few documentation typos fixed

  • Loading branch information
antonioru committed Dec 28, 2019
1 parent 2e13942 commit ff51c0ba50568bfbe9e50c8d580ab24747e7433c
6 .nycrc
@@ -4,5 +4,9 @@
"check-coverage": true,
"extension": [ ".js" ],
"include": [ "src/**/*.js" ],
"exclude": [ "**/*.spec.js" ]
"exclude": [ "src/**/index.js", "**/*.spec.js" ],
"branches": 90,
"lines": 90,
"functions": 90,
"statements": 90
}
@@ -79,9 +79,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0

- useWindowScroll hook & tests


## [0.8.0] - 2019-12-24
## [0.8.0] - 2019-12-28

### Added

- useGlobalEvent hook & tests


## [0.8.1] - 2019-12-28

### Fixed

- Few documentation typos

Large diffs are not rendered by default.

@@ -9,6 +9,6 @@
</head>
<body>
<div id="rsg-root"></div>
<script src="build/bundle.7cf164dd.js"></script>
<script src="build/bundle.f0562b3f.js"></script>
</body>
</html>

Some generated files are not rendered by default. Learn more.

Some generated files are not rendered by default. Learn more.

@@ -10,18 +10,52 @@ If time is not defined, its default value will be 250ms.
```jsx harmony
const TestComponent = () => {
const onWindowResize = useGlobalEvent('resize');
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
onWindowResize((event) => {
console.log('GNIFRO', event)
});
onWindowResize(useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, 250));
return (
<div style={compStyle}>
pippo
<div style={compStyle}>
<p>window width: {width}</p>
<p>window height: {height}</p>
</div>
);
}
);
```

### Debounce time:

It is possible to change the debounce time by defining how many ms to wait:

```jsx harmony
const useDebouncedBy250 = (fn) => useDebouncedCallback(fn, 250);
```

### Dependencies:

Since `useDebouncedCallback` uses `useCallback` under the hood, it is also possible to define its dependencies:

```jsx harmony
const TestComponent = (props) => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
onWindowResize(useDebouncedCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, 250, [props.foo, props.bar]));
return (
<div style={compStyle}>
<p>window width: {width}</p>
<p>window height: {height}</p>
</div>
);
```

**Kind**: global function
@@ -8,41 +8,54 @@ If time is not defined, its default value will be 100ms.
### Usage:

```jsx harmony
const MyComponent = () => {
const throttledClick = useThrottledCallback(() => {
console.log('Button clicked...');
});
*
return (<button onClick={throttledClick}>Click me</button>)
}
const TestComponent = () => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
onWindowResize(useThrottledCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, 250));
return (
<div style={compStyle}>
<p>window width: {width}</p>
<p>window height: {height}</p>
</div>
);
```

### Throttle time:
### Debounce time:

It is possible to change the throttle time by defining how many ms to wait:

```jsx harmony
const MyComponent = () => {
const throttledClick = useThrottledCallback(() => {
console.log('Button clicked...');
}, 250);
return (<button onClick={throttledClick}>Click me</button>)
}
const useDebouncedBy250 = (fn) => useThrottledCallback(fn, 250);
```

### Dependencies:

Since `useThrottledCallback` uses `useCallback` under the hood, it is also possible to define its dependencies:

```jsx harmony
const MyComponent = (props) => {
const throttledClick = useThrottledCallback(() => {
console.log('Button clicked...');
}, 250, [props.foo]);
return (<button onClick={debouncedClick}>Click me</button>)
}
const TestComponent = (props) => {
const [width, setWidth] = useState(window.innerWidth);
const [height, setHeight] = useState(window.innerHeight);
const onWindowResize = useWindowResize();
onWindowResize(useThrottledCallback(() => {
setWidth(window.innerWidth);
setHeight(window.innerHeight);
}, 250, [props.foo, props.bar]));
return (
<div style={compStyle}>
<p>window width: {width}</p>
<p>window height: {height}</p>
</div>
);
```

**Kind**: global function
@@ -1,6 +1,6 @@
{
"name": "beautiful-react-hooks",
"version": "0.8.0",
"name": "@beautiful/react-hooks",
"version": "0.8.1",
"description": "A collection of beautiful (and useful) React hooks",
"main": "index.js",
"scripts": {
@@ -23,7 +23,6 @@
},
"homepage": "https://github.com/antonioru/beautiful-react-hooks#readme",
"dependencies": {
"lodash.debounce": "^4.0.8",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
@@ -61,19 +60,5 @@
"react-test-renderer": "^16.12.0",
"sinon": "^7.5.0",
"webpack": "^4.41.3"
},
"nyc": {
"check-coverage": true,
"include": [
"src"
],
"exclude": [
"src/**/*.spec.js",
"src/**/index.js"
],
"branches": 80,
"lines": 80,
"functions": 80,
"statements": 80
}
}
@@ -11,18 +11,52 @@ import debounce from './utils/debounce';
* ```jsx harmony
*
* const TestComponent = () => {
* const onWindowResize = useGlobalEvent('resize');
* const [width, setWidth] = useState(window.innerWidth);
* const [height, setHeight] = useState(window.innerHeight);
* const onWindowResize = useWindowResize();
*
* onWindowResize((event) => {
* console.log('GNIFRO', event)
* });
* onWindowResize(useDebouncedCallback(() => {
* setWidth(window.innerWidth);
* setHeight(window.innerHeight);
* }, 250));
*
* return (
* <div style={compStyle}>
* pippo
* <div style={compStyle}>
* <p>window width: {width}</p>
* <p>window height: {height}</p>
* </div>
* );
*}
* );
* ```
*
* ### Debounce time:
*
* It is possible to change the debounce time by defining how many ms to wait:
*
* ```jsx harmony
* const useDebouncedBy250 = (fn) => useDebouncedCallback(fn, 250);
* ```
*
* ### Dependencies:
*
* Since `useDebouncedCallback` uses `useCallback` under the hood, it is also possible to define its dependencies:
*
* ```jsx harmony
* const TestComponent = (props) => {
* const [width, setWidth] = useState(window.innerWidth);
* const [height, setHeight] = useState(window.innerHeight);
* const onWindowResize = useWindowResize();
*
* onWindowResize(useDebouncedCallback(() => {
* setWidth(window.innerWidth);
* setHeight(window.innerHeight);
* }, 250, [props.foo, props.bar]));
*
* return (
* <div style={compStyle}>
* <p>window width: {width}</p>
* <p>window height: {height}</p>
* </div>
* );
* ```
*/
const useDebouncedCallback = (fn, wait = 250, dependencies) => useCallback(debounce(fn, wait), dependencies);
@@ -9,41 +9,54 @@ import throttle from './utils/throttle';
* ### Usage:
*
* ```jsx harmony
* const MyComponent = () => {
* const throttledClick = useThrottledCallback(() => {
* console.log('Button clicked...');
* });
**
* return (<button onClick={throttledClick}>Click me</button>)
* }
*
* const TestComponent = () => {
* const [width, setWidth] = useState(window.innerWidth);
* const [height, setHeight] = useState(window.innerHeight);
* const onWindowResize = useWindowResize();
*
* onWindowResize(useThrottledCallback(() => {
* setWidth(window.innerWidth);
* setHeight(window.innerHeight);
* }, 250));
*
* return (
* <div style={compStyle}>
* <p>window width: {width}</p>
* <p>window height: {height}</p>
* </div>
* );
* ```
*
* ### Throttle time:
* ### Debounce time:
*
* It is possible to change the throttle time by defining how many ms to wait:
*
* ```jsx harmony
* const MyComponent = () => {
* const throttledClick = useThrottledCallback(() => {
* console.log('Button clicked...');
* }, 250);
*
* return (<button onClick={throttledClick}>Click me</button>)
* }
* const useDebouncedBy250 = (fn) => useThrottledCallback(fn, 250);
* ```
*
* ### Dependencies:
*
* Since `useThrottledCallback` uses `useCallback` under the hood, it is also possible to define its dependencies:
*
* ```jsx harmony
* const MyComponent = (props) => {
* const throttledClick = useThrottledCallback(() => {
* console.log('Button clicked...');
* }, 250, [props.foo]);
* const TestComponent = (props) => {
* const [width, setWidth] = useState(window.innerWidth);
* const [height, setHeight] = useState(window.innerHeight);
* const onWindowResize = useWindowResize();
*
* onWindowResize(useThrottledCallback(() => {
* setWidth(window.innerWidth);
* setHeight(window.innerHeight);
* }, 250, [props.foo, props.bar]));
*
* return (<button onClick={debouncedClick}>Click me</button>)
* }
* return (
* <div style={compStyle}>
* <p>window width: {width}</p>
* <p>window height: {height}</p>
* </div>
* );
* ```
*/
const useThrottledCallback = (fn, wait = 100, dependencies) => useCallback(throttle(fn, wait), dependencies);

0 comments on commit ff51c0b

Please sign in to comment.
You can’t perform that action at this time.