Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(hooks): useDebounce 훅의 문서 내 예시 추가 완료 #104

Merged
merged 4 commits into from
May 5, 2024
Merged

docs(hooks): useDebounce 훅의 문서 내 예시 추가 완료 #104

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
aada3bb
docs(hooks): useDebounce 훅의 문서 내 예시 추가 완료
Sangminnn May 5, 2024
06a7976
docs(hooks): useDebounce 훅의 문서 내 Usage와 Example의 코드가 동일하도록 수정 완료
Sangminnn May 5, 2024
02e0925
docs(hooks): useDebounce 훅의 문서 Example 내 줄바꿈 코드 제거 완료
Sangminnn May 5, 2024
39ece45
docs(react): useDebounce 훅 문서 내 잘못 import하던 부분 수정 완료
Sangminnn May 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 57 additions & 5 deletions docs/docs/react/hooks/useDebounce.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { useState } from 'react';
import { useDebounce } from '@modern-kit/react'

# useDebounce

`debounce`를 쉽게 사용할 수 있는 커스텀 훅입니다.
Expand Down Expand Up @@ -26,12 +29,61 @@ const useDebounce: (
## Usage

```tsx
import { useState } from 'react';
import { useDebounce } from '@modern-kit/react';

const Example = () => {
const handle = useDebounce(() => {
console.log('debounce');
}, 500);
const [count, setCount] = useState(1);
const [debouncedCount, setDebouncedCount] = useState(1);

const countUp = () => {
setCount(count + 1);
};

const countUpWithDebounce = useDebounce(() => {
setDebouncedCount(debouncedCount + 1);
}, 1000);

return (
<div>
<div style={{ display: "flex" }}>
<button onClick={countUp}>버튼 클릭</button>
<div style={{ width: "50px" }} />
<button onClick={countUpWithDebounce}>debounce 버튼 클릭</button>
</div>
<div>
<p>count: {count}</p>
<p>debouncedCount: {debouncedCount}</p>
</div>
</div>
);
};
```

## Example

export const Example = () => {
const [count, setCount] = useState(1);
const [debouncedCount, setDebouncedCount] = useState(1);
const countUp = () => {
setCount(count + 1);
};
const countUpWithDebounce = useDebounce(() => {
setDebouncedCount(debouncedCount + 1);
}, 1000);
return (
<div>
<div style={{ display: "flex" }}>
<button onClick={countUp}>버튼 클릭</button>
<div style={{ width: "50px" }} />
<button onClick={countUpWithDebounce}>debounce 버튼 클릭</button>
</div>
<div>
<p>count: {count}</p>
<p>debouncedCount: {debouncedCount}</p>
</div>
</div>
);
};

return <button onClick={handle}>button1</button>;
};
<Example />