Skip to content

Commit ce4603e

Browse files
aldrinpvincentaldrinpvincent
committed
docs
1 parent d65e9ab commit ce4603e

15 files changed

+209
-172
lines changed

‎docs/docs/Installation.md

Lines changed: 0 additions & 14 deletions
This file was deleted.

‎docs/docs/useDebounce.md

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

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.
3+
A hook to debounce value changes. This can be used to perform an expensive operation based on react state, props or any calculated value.
4+
5+
<pre>{`import {useDebounce} from 'react-use-custom-hooks';`}</pre>
46

57
### Usage example
68

@@ -41,30 +43,10 @@ function DebounceExample(props) {
4143

4244
### API
4345

44-
import Tabs from '@theme/Tabs';
45-
import TabItem from '@theme/TabItem';
46-
47-
<Tabs>
48-
<TabItem value="js" label="JavaScript">
49-
5046
```typescript
51-
const debouncedValue = useDebounce(value, delay);
47+
function useDebounce<T>(value: T, delay?: number = 500);
5248
```
5349

54-
</TabItem>
55-
<TabItem value="ts" label="Typescript">
56-
57-
```typescript
58-
const debouncedValue: T = useDebounce<T>(
59-
value: T,
60-
delay?: number
61-
);
62-
```
63-
64-
</TabItem>
65-
66-
</Tabs>
67-
6850
#### Params
6951

7052
| Property | Description | Type | Default |

‎docs/docs/useIsMounted.md

Lines changed: 3 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
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+
<pre>{`import {useIsMounted} from 'react-use-custom-hooks';`}</pre>
6+
57
### Usage example
68

79
```typescript
@@ -37,23 +39,6 @@ function IsMountedExample(props) {
3739

3840
### API
3941

40-
import Tabs from '@theme/Tabs';
41-
import TabItem from '@theme/TabItem';
42-
43-
<Tabs>
44-
<TabItem value="js" label="JavaScript">
45-
46-
```js
47-
const isMounted = useIsMounted();
48-
```
49-
50-
</TabItem>
51-
<TabItem value="ts" label="Typescript">
52-
5342
```typescript
54-
const isMounted: () => Boolean = useIsMounted();
43+
function useIsMounted(): () => Boolean;
5544
```
56-
57-
</TabItem>
58-
59-
</Tabs>

‎docs/docs/useLegacyState.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
# useLegacyState
2+
3+
This hook works similar to `this.setState` works in react class components. Here when you call `setState`, it shallow merges state partial into current state. It will be useful when you want change a class component to functional component.
4+
5+
<pre>{`import {useLegacyState} from 'react-use-custom-hooks';`}</pre>
6+
7+
### Usage example
8+
9+
```typescript
10+
const [state, setState] = useLegacyState({ firstName: 'John' });
11+
12+
setState({ lastName: 'Doe' }); // state -> { firstName: 'John', lastName: Doe }
13+
```
14+
15+
### Playground
16+
17+
```jsx live
18+
function LegacyStateExample(props) {
19+
const [state, setState] = useLegacyState({ firstName: 'John' });
20+
21+
return (
22+
<>
23+
<div>state - {JSON.stringify(state, null, 2)} </div>
24+
<input
25+
type="text"
26+
placeholder="Last name"
27+
onChange={e => setState({ lastName: e.target.value })}
28+
/>
29+
<br />
30+
<input
31+
type="number"
32+
placeholder="Age"
33+
onChange={e => setState({ age: e.target.value })}
34+
/>
35+
</>
36+
);
37+
}
38+
```
39+
40+
### API
41+
42+
```typescript
43+
function useSetState<T extends Record<string, any>>(
44+
initialState: T
45+
): readonly [
46+
T,
47+
(statePartial: Partial<T> | ((currentState: T) => Partial<T>)) => void
48+
];
49+
```

‎docs/docs/usePrevious.md

Lines changed: 8 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
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+
<pre>{`import {usePrevious} from 'react-use-custom-hooks';`}</pre>
6+
57
### Usage example
68

79
```typescript
@@ -18,14 +20,16 @@ function PreviousStateExample(props) {
1820

1921
return (
2022
<div>
21-
Current value: <b>{count}</b>, Previous value: <b>{prevCount}</b>
23+
Current value: <b>{count}</b>
24+
<br />
25+
Previous value: <b>{prevCount}</b>
2226
<br />
23-
<button onClick={() => setCount(count + 1)}>+ count</button>
27+
<button onClick={() => setCount(count + 1)}>++ count</button>
2428
<button
2529
style={{ marginLeft: '10px' }}
2630
onClick={() => setCount(count - 1)}
2731
>
28-
- count
32+
-- count
2933
</button>
3034
</div>
3135
);
@@ -34,27 +38,10 @@ function PreviousStateExample(props) {
3438

3539
### API
3640

37-
import Tabs from '@theme/Tabs';
38-
import TabItem from '@theme/TabItem';
39-
40-
<Tabs>
41-
<TabItem value="js" label="JavaScript">
42-
43-
```js
44-
const previousState = usePrevious(state);
45-
```
46-
47-
</TabItem>
48-
<TabItem value="ts" label="Typescript">
49-
5041
```typescript
51-
const previousState: T = usePrevious<T>(state: T);
42+
function usePrevious<T>(value: T): T | undefined;
5243
```
5344

54-
</TabItem>
55-
56-
</Tabs>
57-
5845
#### Params
5946

6047
| Property | Description | Type | Default |

‎docs/docs/useSafeState.md

Lines changed: 13 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
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 and leak happens mostly with asynchronous opration like AJAX calls.
3+
A memory safe version of react's `useState` hook. In react, on way memory leak occurs when `setState` operation performed on an unmounted component and it happens mostly with asynchronous opration like AJAX calls.
44

55
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+
<pre>{`import {useSafeState} from 'react-use-custom-hooks';`}</pre>
10+
911
### Usage example
1012

1113
```typescript
@@ -16,40 +18,20 @@ const [value, setvalue] = useSafeState(initialState);
1618

1719
```jsx live
1820
function SafeStateExample(props) {
19-
const [visible, setVisible] = useState(true);
20-
21-
return (
22-
<div>
23-
<button onClick={() => setVisible(false)}>Unmount</button>
24-
{visible && <Child />}
25-
</div>
26-
);
27-
}
28-
```
29-
30-
### API
31-
32-
```js
33-
const [state, setState] = useSafeState(initialState);
34-
```
35-
36-
<!-- import Tabs from '@theme/Tabs';
37-
import TabItem from '@theme/TabItem';
21+
const [data, setData] = useSafeState();
3822

39-
<Tabs>
40-
<TabItem value="js" label="JavaScript">
23+
useEffect(() => {
24+
setTimeout(() => {
25+
setData('some value');
26+
}, 3000);
27+
}, []);
4128

42-
```js
43-
const [state, setState] = useSafeState(initialState);
29+
return <div>{data || 'loading...'}</div>;
30+
}
4431
```
4532

46-
</TabItem>
47-
<TabItem value="ts" label="Typescript">
33+
### API
4834

4935
```typescript
50-
const [state, setState] = useSafeState(initialState);
36+
function useSafeState<T>(initialState: T): [T, (value: T) => void];
5137
```
52-
53-
</TabItem>
54-
55-
</Tabs> -->

‎docs/docusaurus.config.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula');
66

77
/** @type {import('@docusaurus/types').Config} */
88
const config = {
9-
title: 'react use custom hooks',
10-
tagline: 'a collection of react custom hooks',
9+
title: 'React use custom hooks',
10+
tagline: 'Collection of React Custom Hooks',
1111
url: 'https://your-docusaurus-test-site.com',
1212
baseUrl: '/',
1313
onBrokenLinks: 'throw',
@@ -54,7 +54,7 @@ const config = {
5454
// title: 'Hooks studio',
5555
logo: {
5656
alt: 'Hooks studio logo',
57-
src: 'img/logo.png',
57+
src: 'img/h2.svg',
5858
},
5959
items: [
6060
// {
@@ -73,15 +73,15 @@ const config = {
7373
footer: {
7474
style: 'dark',
7575
links: [
76-
{
77-
title: 'Docs',
78-
items: [
79-
{
80-
label: 'Custom hooks',
81-
to: '/docs/hooks',
82-
},
83-
],
84-
},
76+
// {
77+
// title: 'Docs',
78+
// items: [
79+
// {
80+
// label: 'Custom hooks',
81+
// to: '/docs/hooks',
82+
// },
83+
// ],
84+
// },
8585
// {
8686
// title: 'Community',
8787
// items: [

‎docs/src/components/HomepageFeatures.js

Lines changed: 0 additions & 39 deletions
This file was deleted.

‎docs/src/components/HookDetails.js

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react';
2+
import styles from './HookDetails.module.css';
3+
4+
export default function HookDetails() {
5+
return (
6+
<section className={styles.features}>
7+
<div className="container">
8+
9+
<h3 className={styles.red}>
10+
Installation
11+
</h3>
12+
<pre>
13+
npm install --save react-use-custom-hooks
14+
<br />
15+
yarn add react-use-custom-hooks
16+
</pre>
17+
<h3 className={styles.red}>
18+
Usage
19+
</h3>
20+
<pre>
21+
{`import {useSafeState} from 'react-use-custom-hooks';`}
22+
</pre>
23+
</div>
24+
</section>
25+
);
26+
}

0 commit comments

Comments
 (0)