pio-essential
v0.3.5
Published
TailwindCSS based React Design System & utility hooks
Downloads
792
Readme
Getting Start
Introduction
그래서 만들어 봤습니다. PIO 가 애정하고 자주 쓰는 React Components, Hooks 모음집 pio-essential
pio-essential: 필요한 컴포넌트, 훅을 프로젝트에 복사하여 붙여넣을 수 있는 React 오픈 소스 라이브러리 입니다.
pio-essntial 은 npx 를 통해 필요한 컴포넌트, 훅을 복사하여 붙여넣을 수 있는 재사용 가능한 컴포넌트, 훅 모음입니다. 필요한 컴포넌트, 훅을 선택하고 프로젝트에 복사하세요! 그리고 필요한 부분들을 수정해서 사용하세요! pio-essential 의 컴포넌트, 훅은 npm 을 통해 제공되지 않습니다.
Installation
pio-essential 은 shadcn/ui 으로부터 모티브를 얻었으며, TailwindCSS 를 기반으로 작성되었습니다. 그렇기 때문에 pio-essential 의 컴포넌트를 사용하기 위해서는 다음의 종속성 설치 및 환경 설정이 필요합니다.
Note: Shadcn UI 를 사용하고 있다면 해당 단계를 건너뛰어도 무방합니다. shadcn UI 를 통해 좀 더 자세하게 종속성 설치 및 환경 설정하기 (권장)
1. TailwindCSS 설치
Terminal
npm install -D tailwindcss postcss autoprefixer
yarn add -D tailwindcss postcss autoprefixer
npx tailwindcss init
postcss.config.js
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
};
main.css
@tailwind base;
@tailwind components;
@tailwind utilities;
NextJS, Vite 등 다양한 환경에서의 TailwindCSS 설정은 TailwindCSS 공식 문서를 따라주세요.
2. 그 외 종속성 설치 및 유틸리티 함수 생성
npm install tailwind-merge clsx class-variance-authority
yarn add tailwind-merge clsx class-variance-authority
src/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
3. path alias 설정
pio-essential 의 컴포넌트, 훅은 다음의 구조에 복사됩니다.
root
└── 📦 src
├── 📂 components
| ├── 📂 ui
| └── 📂 icons
└── 📂 hooks
연관된 컴포넌트, 유틸리티 함수 import 를 위해 path alias 설정이 필요합니다.
tsconfig
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
StoryBook 을 통해 사용법 알아보기
StoryBook 을 통해 컴포넌트 및 훅의 Reference를 알아보세요!
Usage
npx pio-essential add <NAME>
Components
Button
HorizontalList
LoadingDots
Modal
RippleEffect
— 잔물결 이펙트를 생성하는 컴포넌트Sidebar
— Resizeable Sidebar 컴포넌트Tab
— React Context API 기반 Tab Header, Tab Section
Hooks
useHorizontalScroll
— 수평 스크롤을 위한 Grabbing 이벤트 기능을 제공하는 HookuseOutsideClick
— 특정 영역 외부 클릭에 대한 callback 기능을 제공하는 Hook