Skip to content

docs(ImpressionArea): auto-generated docs #257

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

docs(ImpressionArea): auto-generated docs #257

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions src/components/ImpressionArea/ImpressionArea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,14 @@
## Interface

```ts
function ImpressionArea(
as: ElementType = 'div',
function ImpressionArea<T extends ElementType>(
as: T = 'div',
rootMargin: string,
areaThreshold: number,
timeThreshold: number,
onImpressionStart: () => void,
onImpressionEnd: () => void,
ref: Ref<HTMLElement>,
ref: Ref<Element<T>>,
children: React.ReactNode,
className: string
): JSX.Element;
Expand All @@ -22,7 +22,7 @@ function ImpressionArea(

<Interface
name="as"
type="ElementType"
type="T"
description="The HTML tag to render. Defaults to <code>div</code>."
/>

Expand Down Expand Up @@ -58,7 +58,7 @@ function ImpressionArea(

<Interface
name="ref"
type="Ref<HTMLElement>"
type="Ref<Element<T>>"
description="Reference to the element."
/>

Expand Down
31 changes: 16 additions & 15 deletions src/components/ImpressionArea/ko/ImpressionArea.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# ImpressionArea

`ImpressionArea`는 특정 DOM 요소가 화면에 보이는 시간을 측정하고 요소가 뷰포트에 들어오거나 나갈 때 콜백을 실행하는 컴포넌트예요. 이 컴포넌트는 요소의 가시성을 추적하기 위해 `useImpressionRef` 훅을 사용해요.
`ImpressionArea`는 특정 DOM 요소가 화면에 보이는 시간을 측정하고, 그 요소가 뷰포트에 들어가거나 나갈 때 콜백을 실행하는 컴포넌트예요. 이 컴포넌트는 요소의 가시성을 추적하기 위해 `useImpressionRef` 훅을 사용해요.

## 인터페이스

```ts
function ImpressionArea(
as: ElementType = 'div',
function ImpressionArea<T extends ElementType>(
as: T = 'div',
rootMargin: string,
areaThreshold: number,
timeThreshold: number,
onImpressionStart: () => void,
onImpressionEnd: () => void,
ref: Ref<HTMLElement>,
ref: Ref<Element<T>>,
children: React.ReactNode,
className: string
): JSX.Element;
Expand All @@ -22,26 +22,26 @@ function ImpressionArea(

<Interface
name="as"
type="ElementType"
description="렌더링할 HTML 태그예요. 기본값은 <code>div</code>이에요."
type="T"
description="렌더할 HTML 태그예요. 기본값은 <code>div</code>예요."
/>

<Interface
name="rootMargin"
type="string"
description="감지 영역을 조정하기 위한 마진이에요."
description="탐지 영역을 조정하기 위한 여백이에요."
/>

<Interface
name="areaThreshold"
type="number"
description="요소가 보여야 하는 최소 비율이에요 (0에서 1)."
description="요소에서 보여야 할 최소 비율이에요 (0에서 1 사이)."
/>

<Interface
name="timeThreshold"
type="number"
description="요소가 보여야 하는 최소 시간(밀리초)이에요."
description="요소가 보여야 할 최소 시간이에요 (밀리초 단위)."
/>

<Interface
Expand All @@ -58,14 +58,14 @@ function ImpressionArea(

<Interface
name="ref"
type="Ref<HTMLElement>"
type="Ref<Element<T>>"
description="요소에 대한 참조예요."
/>

<Interface
name="children"
type="React.ReactNode"
description="컴포넌트 내부에 렌더링될 자식 요소들이에요."
description="컴포넌트 내부에 렌더될 자식 요소들이에요."
/>

<Interface
Expand All @@ -79,7 +79,7 @@ function ImpressionArea(
<Interface
name=""
type="JSX.Element"
description="자식 요소들의 가시성을 추적하는 React 컴포넌트예요."
description="자식 요소들의 가시성을 추적하는 리액트 컴포넌트예요."
/>

## 예시
Expand All @@ -88,13 +88,14 @@ function ImpressionArea(
function App() {
return (
<ImpressionArea
onImpressionStart={() => console.log('요소가 보여요')}
onImpressionEnd={() => console.log('요소가 사라졌어요')}
onImpressionStart={() => console.log('Element entered view')}
onImpressionEnd={() => console.log('Element exited view')}
timeThreshold={1000}
areaThreshold={0.5}
>
<div>저를 추적해 보세요!</div>
<div>Track me!</div>
</ImpressionArea>
);
}
```