🎣

@lani.ground/react-hooks

React Component Library

NPM Version
Production Ready
TypeScript
🎯

Hooks Examples

🍪

useCookies

쿠키를 쉽게 관리할 수 있는 hook입니다. 설정, 확인, 삭제 기능을 제공합니다.

현재 쿠키(key: test) 값:
undefined

Methods

1{
2  setCookie: (name: string, value: string, options?: CookieOptions) => void,
3  getCookie: (name: string) => string | undefined,
4  hasCookie: (name: string) => boolean,
5  deleteCookie: (name: string) => void
6}

CookieOptions:

PropertyTypeDescription
pathstring쿠키 경로 (기본값: '/')
expiresDate | string | 'today'만료일
maxAgenumber최대 수명 (초)
domainstring쿠키 도메인

주요 기능

  • 쿠키 설정/조회/삭제
  • 만료일 설정
  • 브라우저 호환성
  • 타입 안전성
✂️

useString

문자열 조작을 위한 유틸리티 hook입니다. 생략 표시(ellipsis) 기능을 제공합니다.

텍스트 생략 예시

원본:"안녕하세요 세상!"
왼쪽 생략:"...세요 세상!"
오른쪽 생략:"안녕하세요 ..."

Methods

1{
2  ellipsis: ({ value, length, dir? }: EllipsisOptions) => string
3}

EllipsisOptions:

PropertyTypeDescription
valuestring원본 문자열
lengthnumber자를 길이
dir'right' | 'left'자르는 방향 (기본값: 'right')

주요 기능

  • 문자열 생략
  • 방향 선택 (좌/우)
  • 길이 제한
  • 유니코드 지원
📜

useWindowScroll

윈도우 스크롤을 제어하는 hook입니다. 스크롤 잠금/해제 기능을 제공합니다.

페이지 스크롤을 잠그거나 해제할 수 있습니다. 모달이나 팝업에서 유용합니다.

Methods

1{
2  lockScroll: () => void,
3  unlockScroll: () => void
4}

주요 기능

  • 스크롤 잠금/해제
  • 모달 지원
  • 브라우저 호환성
  • 상태 관리
👁️

useVisibleElement

화면에 보이는 요소를 감지하는 hook입니다. Intersection Observer API를 활용합니다.

현재 보이는 요소

Active Key:none
Element:none

Section 0

Section 1

Section 2

Section 3

Usage

1import { useVisibleElement } from '@lani.ground/react-hooks';
2
3const { ref, activeElement, activeKey } = useVisibleElement({
4  key: 'test-element',
5  activeClass: 'here',
6});
7
8<div ref={ref}>
9  <div>...</div>
10  <div>...</div>
11  <div>...</div>
12</div>

Properties:

PropertyTypeDescription
keystring요소 식별 키 (기본값: 'visible-element')
activeClassstring가시 요소에 추가할 CSS 클래스

주요 기능

  • Intersection Observer
  • 가시성 감지
  • 스크롤 이벤트
  • 성능 최적화