Jae0brary React

React의 다양한 Hook, Component들을 제공하는 라이브러리입니다.

🔗 다양한 JavaScript TypeScript Util 라이브러리

📕 Storybook을 통한 설명 & 체험!

Install

npm install @jae0brary/react

yarn add @jae0brary/react

Use

EMS 방식과 CJS 방식 모두 사용 가능합니다.

import { components, hooks } from "@jae0brary/react";

// or

const { components, hooks } = require("@jae0brary/react");

Components

Modal UI를 편하게 사용할 수 있도록 구현한 Modal Component입니다. 기본적으로 AwayClick, Escape key를 이용한 Modal 닫기 기능을 제공합니다. ( 해당 기능은 Option을 통해 off 할 수 있습니다. )

use

📕 Modal - Storybook 설명서 & 체험

Modal은 useModal hook과 함께 사용하여 useModal 내부의 값을 Modal에 전달하여 사용할 수 있습니다.

• isShow Props에 useModal hook 내부 isShow를 전달합니다.
• onClose Props에 useModal hook 내부 handleCloseModal 전달합니다.

handleShowModal를 호출하여 Modal을 나타낼 수 있습니다.

import { Modal, useModal } from "@jae0brary/react";

const {
  isShow, // Modal Component의 isShow Prop에 전달합니다.
  handleShowModal, // Modal을 활성화시킬 때 호출합니다.
  handleCloseModal // Modal Component의 onClose Prop에 전달합니다.
} = useModal();

return (
  <Modal
    isShow={isShow}
    onClose={handleCloseModal}

    // Optional
    hideCloseIcon={false}
    disableAwayClick={false}
    backgroundStyle={/* CSS style */}
    modalStyle={/* CSS style */}
    zIndex={500}
  >

    /* children */

  </Modal>
)

Props

• isShow useModal의 isShow 값을 전달받습니다.

• onClose useModal의 handleCloseModal 메서드를 전달받습니다.

• hideCloseIcon ( optional ) true 전달 시 기본 스타일 Close Icon을 비활성화합니다.

• disableAwayClick ( optional ) true 전달 시 Away Click을 통한 Modal close 기능을 비활성화합니다.

• backgroundStyle ( optional ) Modal의 background의 스타일을 변경하기 위해 CSS style 값을 전달받습니다.

• modalStyle ( optional ) Modal의 스타일을 변경하기 위해 CSS style 값을 전달받습니다.

• zIndex ( optional ) 필요한 경우 Modal의 z-index 값을 제어하기 위해 사용할 수 있습니다.

type

• isShow : boolean
• onClose : () => void

• hideCloseIcon ( optional ) : boolean
• disableAwayClick ( optional ) : boolean
• backgroundStyle ( optional ) : CSSProperties
• modalStyle ( optional ) : CSSProperties
• zIndex ( optional ) : number

Skeleton UI를 편하게 만들어 사용할 수 있도록 구현한 Skeleton Component입니다. 기본적으로 width, height값을 전달해 원하는 크기의 Skeleton을 만들 수 있습니다. ( radius값을 전달해 radius를 수정할 수 있습니다. )

use

📕 Skeleton - Storybook 설명서 & 체험

• width Props에 string | number를 전달해 너비를 지정합니다.
• height Props에 string | number를 전달해 높이를 지정합니다.

import { Skeleton } from "@jae0brary/react";

return (
  <Modal
    width={500} // px
    width="50rem"

    height={300} // px
    height="30rem"

    // Optional
    radius={12} // 12px
    radius="1.2rem"
  />
)

Props

• width string | number를 전달해 너비를 지정합니다.
• height string | number를 전달해 높이를 지정합니다.
• radius ( optional ) string | number를 전달해 radius를 지정합니다. ( default = 1.2rem )

type

• width : string | number
• height : string | number

• radius ( optional ) : boolean | number

Hooks

toggle을 통한 상태를 관리하기 위한 hook입니다.

use

📕 useToggle - Storybook 설명서 & 체험

useToggle의 인수로 Boolean 값을 전달해 초기 상태를 지정할 수 있습니다.

( default : false )

import { useToggle } from "@jae0brary/react";

const { isToggle, handleToggle, handleToggleOn, handleToggleOff } = useToggle(true);

return

• isToggle : Toggle의 상태를 boolean 나타냅니다.
• handleToggle : isToggle의 상태를 반대 값으로 toggle 시킵니다.
• handleToggleOn : isToggle의 상태를 true로 변경시킵니다.
• handleToggleOff : isToggle의 상태를 false로 변경시킵니다.

type

• isToggle : boolean
• handleToggle : () => void
• handleToggleOn : () => void
• handleToggleOff : () => void

Session & Local Storage에 쉽게 접근하여 데이터를 저장하고 꺼내기 위한 hook입니다.

use

TypeScript를 사용하시는 경우 Generics Type을 통해 데이터 Storage 속 데이터의 타입을 전달하실 수 있습니다.

• param : key Session & Local Storage에 접근할 key 값을 전달받습니다.

• param : initialData 전달한 key에 해당하는 Session Storage의 기본 값을 전달받습니다.

import { useLocalStorage, useSessionStorage } from "@jae0brary/react";

const {
  data,
  setSessionStorage /* setLocalStorage */,
  removeSessionStorage /* removeLocalStorage */,
} = useSessionStorage<string>({
  key: "address",
  initialData: "",
}); /* useLocalStorage */

setSessionStorage("[email protected]");

removeSessionStorage();

return

• data : 전달한 key에 해당하는 Session Storage 값을 사용할 수 있습니다.
• setSessionStorage : 전달한 key에 해당하는 Session Storage에 값을 추가합니다.
• removeSessionStorage : 전달한 key에 해당하는 Session Storage를 제거합니다.

type

• data : T
• setSessionStorage : ( newData : T ) => T
• removeSessionStorage : () => void

Modal UI의 상태 관리를 위해 사용하는 hook 입니다.

use

Modal UI Component와 함께 사용가능합니다.

아래 예시를 참고하여 Modal UI Component의 Prop에 값을 전달합니다.

import { Modal, useModal } from "@jae0brary/react";

const {
  isShow, // Modal Component의 isShow Prop에 전달합니다.
  handleShowModal, // Modal을 활성화시킬 때 호출합니다.
  handleCloseModal // Modal Component의 onClose Prop에 전달합니다.
} = useModal();

return (
  <Modal
    isShow={isShow}
    onClose={handleCloseModal}

    // Optional
    hideCloseIcon={false}
    disableAwayClick={false}
    backgroundStyle={/* CSS style */}
    modalStyle={/* CSS style */}
    zIndex={500}
  >

    /* children */

  </Modal>
)

return

• isShow : Modal Component의 isShow Prop에 전달합니다.
• handleShowModal : Modal을 활성화시킬 때 호출합니다.
• handleCloseModal : Modal Component의 onClose Prop에 전달합니다.

type

• isShow : T
• handleShowModal : () => void
• handleCloseModal : () => void

특정 UI ( 요소 ) 외 다른 UI( 요소 )를 클릭하는 경우에 대해 컨트롤할 수 있는 hook 입니다.

use

📕 useClickAway - Storybook 설명서 & 체험

useClickAway hook의 인수로 callback 함수를 전달합니다. 이후 useClickAway hook이 반환하는 ref를 대상 요소의 ref에 전달홥니다. ( TypeScript 사용 시, useClickAway<T>(callback) 제네릭 타입을 통해 ref의 타입을 전달합니다. )

• callback 다른 UI를 클릭했을 경우 실행될 callback 함수를 전달받습니다. ( type : ( e? : MouseEvent, TouchEvent ) => void )

import { useClickAway } from "@jae0brary/react";

const handler = () => {

  /* ... action */

}

const ref = useClickAway<HTMLButtonElement>(handler);

return (
  <>
    {/* other components */}

    <div ref={ref}>
      Click!
    </div>

    {/* other components */}

  </>
)

return

• ref : Click Away의 대상 요소에 전달할 ref입니다.

type

• ref : MutableRefObject<T | null>

Version

• 0.0.1 hooks : useToggle 추가

• 0.0.4 hooks : useSessionStorage, useLocalStorage 추가

• 0.0.5 Components : Modal 추가 Hooks : useModal, useClickAway 추가

• 0.0.8 Storybook 도입

• 0.0.9 Storybook : useToggle, useClickAway

• 0.0.11 Modal : 로직 개선

• 0.0.12 Components : Skeleton UI 추가