Skip to content

Commit d65e9ab

Browse files
docs
1 parent bac84f1 commit d65e9ab

File tree

9 files changed

+106
-59
lines changed

9 files changed

+106
-59
lines changed

docs/docs/useDebounce.md

Lines changed: 33 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,21 @@
11
# useDebounce
22

3-
A hook for debouncing.
3+
A hook to debounce value change. This can be used to perform an expensive operation based on react state, props or any calculated value.
44

5-
## Examples
5+
### Usage example
6+
7+
```typescript
8+
const [query, setQuery] = useState('');
9+
const debouncedQuery = useDebounce(query, delayInMilliseconds);
10+
```
11+
12+
### Playground
13+
14+
The `debouncedQuery` value will be updated after `delayInMilliseconds` after the last change and it can be used to perform a search operation instead of querying the api every time the user types a character.
615

716
```jsx live
817
function DebounceExample(props) {
9-
const delayInMilliseconds = 1000;
18+
const delayInMilliseconds = 1000; // put outside of component
1019
const [query, setQuery] = React.useState('');
1120
const debouncedQuery = useDebounce(query, delayInMilliseconds);
1221

@@ -30,16 +39,33 @@ function DebounceExample(props) {
3039
}
3140
```
3241

33-
## API
42+
### API
43+
44+
import Tabs from '@theme/Tabs';
45+
import TabItem from '@theme/TabItem';
46+
47+
<Tabs>
48+
<TabItem value="js" label="JavaScript">
3449

3550
```typescript
36-
const debouncedValue = useDebounce(
37-
value: any,
51+
const debouncedValue = useDebounce(value, delay);
52+
```
53+
54+
</TabItem>
55+
<TabItem value="ts" label="Typescript">
56+
57+
```typescript
58+
const debouncedValue: T = useDebounce<T>(
59+
value: T,
3860
delay?: number
3961
);
4062
```
4163

42-
### Params
64+
</TabItem>
65+
66+
</Tabs>
67+
68+
#### Params
4369

4470
| Property | Description | Type | Default |
4571
| -------- | -------------------------- | -------- | ------- |

docs/docs/useIsMounted.md

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
# useIsMounted
22

3-
This hook is used to check whether the component is mounted or not. This hook will return a function which return a boolean value stating the component is mounted or not on invoking. This will be useful if you want to perform some operation based on component is mounted or not like stop polling an api, update state etc.
3+
This hook is used to check whether the component is mounted or not. This hook will return a function which will return a boolean value stating the component is mounted or not on calling. This will be useful if you want to perform some operation based on component is mounted or not like stop polling an api, update state etc.
44

5-
## Usage
5+
### Usage example
66

77
```typescript
88
const isMounted = useIsMounted();
@@ -11,9 +11,31 @@ if (isMounted()) {
1111
}
1212
```
1313

14-
## Examples
14+
### Playground
1515

16-
## API
16+
The value returned by the `isMounted` function will be true if the component is mounted and false if the component is unmounted.
17+
18+
```jsx live
19+
function IsMountedExample(props) {
20+
const isMounted = useIsMounted();
21+
22+
useEffect(() => {
23+
console.log('isMounted :>> ', isMounted());
24+
25+
return () => {
26+
console.log('isMounted :>> ', isMounted());
27+
};
28+
}, []);
29+
30+
return (
31+
<div>
32+
Check console to see the value of <b>isMounted()</b>
33+
</div>
34+
);
35+
}
36+
```
37+
38+
### API
1739

1840
import Tabs from '@theme/Tabs';
1941
import TabItem from '@theme/TabItem';

docs/docs/usePrevious.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22

33
If you want to access the previous props or state in functional components, you can use the `usePrevious` hook. This hook would work for props, state, or any other calculated value.
44

5-
## Usage
5+
### Usage example
66

77
```typescript
88
const [value, setvalue] = useState(initialState);
99
const previousValue = usePrevious(value);
1010
```
1111

12-
## Examples
12+
### Playground
1313

1414
```jsx live
1515
function PreviousStateExample(props) {
@@ -32,7 +32,7 @@ function PreviousStateExample(props) {
3232
}
3333
```
3434

35-
## API
35+
### API
3636

3737
import Tabs from '@theme/Tabs';
3838
import TabItem from '@theme/TabItem';
@@ -55,7 +55,7 @@ const previousState: T = usePrevious<T>(state: T);
5555

5656
</Tabs>
5757

58-
### Params
58+
#### Params
5959

6060
| Property | Description | Type | Default |
6161
| -------- | ------------------------------------------------- | ----- | ------- |

docs/docs/useSafeState.md

Lines changed: 14 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,39 @@
11
# useSafeState
22

3-
A memory safe version of react's `useState` hook. In react memory leak occurs when `setState` operation performed on an unmounted component. This happens mostly with asynchronous opration like api calls.
3+
A memory safe version of react's `useState` hook. In react memory leak occurs when `setState` operation performed on an unmounted component and leak happens mostly with asynchronous opration like AJAX calls.
44

5-
For example, if the user initiated an api call and navigated away from tha page before the call is returned, the component will get unmounted and when the api call is fulfilled, `setstate` will be performed on the unmounted component causing a memory leak.
5+
For example, if the user initiated an AJAX call and navigated away from tha page before the call is returned, the component will get unmounted and when the api call is fulfilled, the `setstate` will be performed on the unmounted component causing a memory leak.
66

77
This hook will prevent these kind of memory leaks by checking whether the component is mounted before `setstate` operation, if the component is unmounted, it will jsut ignore the `setstate` call. The API is same as react's `useState` hook, so you can use this hook instead of `useState` for asynchronous opration to avoid any memory leak.
88

9-
## Usage
9+
### Usage example
1010

1111
```typescript
1212
const [value, setvalue] = useSafeState(initialState);
1313
```
1414

15-
## Examples
15+
### Playground
1616

1717
```jsx live
1818
function SafeStateExample(props) {
19-
const [count, setCount] = useSafeState(0);
19+
const [visible, setVisible] = useState(true);
2020

2121
return (
2222
<div>
23-
Current value: <b>{count}</b>, Previous value: <b>{prevCount}</b>
24-
<br />
25-
<button onClick={() => setCount(count + 1)}>+ count</button>
26-
<button
27-
style={{ marginLeft: '10px' }}
28-
onClick={() => setCount(count - 1)}
29-
>
30-
- count
31-
</button>
23+
<button onClick={() => setVisible(false)}>Unmount</button>
24+
{visible && <Child />}
3225
</div>
3326
);
3427
}
3528
```
3629

37-
## API
30+
### API
3831

39-
import Tabs from '@theme/Tabs';
32+
```js
33+
const [state, setState] = useSafeState(initialState);
34+
```
35+
36+
<!-- import Tabs from '@theme/Tabs';
4037
import TabItem from '@theme/TabItem';
4138
4239
<Tabs>
@@ -55,4 +52,4 @@ const [state, setState] = useSafeState(initialState);
5552
5653
</TabItem>
5754
58-
</Tabs>
55+
</Tabs> -->

docs/docusaurus.config.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,13 +25,13 @@ const config = {
2525
sidebarPath: require.resolve('./sidebars.js'),
2626
// Please change this to your repo.
2727
editUrl:
28-
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
28+
'https://github.com/aldrinpvincent/react-use-custom-hooks/tree/master/docs/',
2929
},
3030
blog: {
3131
showReadingTime: true,
3232
// Please change this to your repo.
3333
editUrl:
34-
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
34+
'https://github.com/aldrinpvincent/react-use-custom-hooks/tree/master/docs/',
3535
},
3636
theme: {
3737
customCss: require.resolve('./src/css/custom.css'),
@@ -63,7 +63,7 @@ const config = {
6363
// label: 'Projects',
6464
// },
6565
{
66-
href: 'https://github.com/aldrinpvincent/hooks-studio',
66+
href: 'https://github.com/aldrinpvincent/react-use-custom-hooks',
6767
label: 'GitHub',
6868
position: 'right',
6969
},

docs/package-lock.json

Lines changed: 18 additions & 16 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

docs/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"prism-react-renderer": "^1.2.1",
2424
"react": "^17.0.1",
2525
"react-dom": "^17.0.1",
26-
"react-use-custom-hooks": "file:.."
26+
"react-use-custom-hooks": "^0.1.3"
2727
},
2828
"browserslist": {
2929
"production": [
Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,13 @@
11

22
import React from 'react';
3-
import { usePrevious, useSafeState, useDebounce } from "react-use-custom-hooks";
3+
import { useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState } from "react-use-custom-hooks";
44

55
// Add react-live imports you need here
66
const ReactLiveScope = {
77
React,
88
...React,
9-
usePrevious,
10-
useSafeState,
11-
useDebounce
9+
useDebounce, useSafeState, useIsMounted, usePrevious, useLegacyState
1210
};
1311

1412
export default ReactLiveScope;
13+

docs/yarn.lock

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6272,11 +6272,12 @@
62726272
"use-composed-ref" "^1.0.0"
62736273
"use-latest" "^1.0.0"
62746274

6275-
"react-use-custom-hooks@file:..":
6276-
"resolved" "file:.."
6275+
"react-use-custom-hooks@^0.1.3":
6276+
"integrity" "sha512-YiAls11DBBL6zMbdYw8lz6Ht1lOv0DE32m5ZZihKg4QoVjhcwAUUSe+l4WR8Zmf6+67I2rQ1CpVacO26JRG4ng=="
6277+
"resolved" "https://registry.npmjs.org/react-use-custom-hooks/-/react-use-custom-hooks-0.1.3.tgz"
62776278
"version" "0.1.3"
62786279

6279-
"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^15.0.2 || ^16.0.0 || ^17.0.0", "react@^16.13.1", "react@^16.13.1 || ^17.0.0", "react@^16.3.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.4 || ^17.0.0", "react@^17.0.0 || ^16.3.0 || ^15.5.4", "react@^17.0.1", "react@>= 16.8.0 < 18.0.0", "react@>=0.14.9", "react@>=15", "react@>=16.3.0", "react@17.0.2":
6280+
"react@*", "react@^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0", "react@^15.0.2 || ^16.0.0 || ^17.0.0", "react@^16.13.1", "react@^16.13.1 || ^17.0.0", "react@^16.3.0 || ^17.0.0", "react@^16.8.0 || ^17.0.0", "react@^16.8.4 || ^17.0.0", "react@^17.0.0 || ^16.3.0 || ^15.5.4", "react@^17.0.1", "react@>= 16.8.0 < 18.0.0", "react@>=0.14.9", "react@>=15", "react@>=16", "react@>=16.3.0", "react@17.0.2":
62806281
"integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
62816282
"resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
62826283
"version" "17.0.2"

0 commit comments

Comments
 (0)