React-ts-sook-ui NPM

react-ts-sook-ui

안녕하세요 🙇🏻‍♀️ 자주쓰는 공통컴포넌트 모음 Zip🏠 입니다. 해당 프로젝트는 React + TypeScript + Vite 기반으로 세팅되었으며 스타일은 Tailwindcss 로 작성되었습니다.

Hello 👋🏻 This is a kinda of collection of frequently used common components. The project was set up based on React + TypeScript + Vite and Tailwindcss.

🤔 How to use

Import Both thing that the component wolud you use and style.css

⚠️ Please be aware of that your styles will not work if you do not import the CSS.

import { Button } from "react-ts-sook-ui";
import "react-ts-sook-ui/dist/style.css";

🎨 Basic Color system

ThemeProps | Prop | Type | Default | Description | | ----- | ----------------------------------------------------------------- | ------- | ----------- | | theme | "primary" ,"success" , "progress" , "error" , "warning" , "light" | primary | 테마컬러 |

Text Color

Theme Color

🎊 API

Button

Prop	Type	Default	Description
theme	ThemeProps	true	기본 컬러테마설정
onClick	(e?: React.MouseEvent) => void;		클릭이벤트
size	"sm" , "md" , "lg"	md	버튼 사이즈
disabled	boolean	false	버튼 비활성화
type	"button" ,"submit" , "reset";	button	버튼 타입
isRing	boolean	true	버튼 클릭 시 나타나는 아웃라인 효과
isOutline	boolean		버튼 아웃라인 적용
customStyle	React.CSSProperties		사용자 지정 스타일
children	React.ReactNode		사용자 지정 칠드런

Badge

Prop	Type	Default	Description
text	string		뱃지 텍스트
size	"sm" , "md" , "lg"	md	뱃지 사이즈
theme	ThemeProps	primary	기본 컬러테마설정
customStyle	string		사용자 지정 스타일. 텍스트 컬러의 0.2 만큼의 opacity 가 배경이 된다.

Highlight

Prop	Type	Default	Description
text	string		밑줄 텍스트
size	"xs" , "sm" , "md" , "lg" ,"xl"	md	텍스트 사이즈
theme	ThemeProps	primary	기본 컬러테마설정
customStyle	React.CSSProperties		사용자 지정 스타일
from	string		사용자 지정 스타일
to	string ,never		from 이 없으면 never

Dialog

Prop	Type	Default	Description
title	string		헤더 타이틀
size	"sm" , "md" , "lg"	md	다이얼로그 사이즈
children	React.ReactNode		다이얼로그 내부 컨텐츠
handleClosePopup	() => void		다이얼로그 닫기 클릭
handleConfirmPopup	() => void		다이얼로그 확인 클릭
cancelText	string	닫기	다이얼로그 닫기 텍스트
confirmText	string	확인	다이얼로그 확인 텍스트
type	"button" ,"submit"	button	다이얼로그 확인버튼 타입
disabled	boolean	false	다이얼로그 확인 버튼 비활성화
isXIcon	boolean	true	다이얼로그 헤더의 X 아이콘 표시여부
isFixedButton	boolean	true	다이얼로그 버튼 표시여부
headerAlign	"start" , "center"	center	헤더 타이틀 위치

Colorpicker

Prop	Type	Default	Description
theme	ThemeProps	primary	아이드롭퍼 버튼컬러
size	"sm" , "md" , "lg"	md	컬러피커 사이즈
withInput	boolean	true	컬러피커 input 여부
disabled	boolean	false	컬러피커 input 액션 비활성화
isEyedropper	boolean	true	Eyedropper 기능을 추가/제외 여부
customStyle	string , number	true	사용자 지정 스타일
getColor	React.Dispatch<SetStateAction>	true	컬러피커에서 선택한 컬러상태값 추출