Jgdesign NPM | npm.io

소개

UI 컴포넌트 라이브러리 입니다.

jgdesign은 프론트엔드 개발자들을 위한 실용적인 반응형 형식의 컴포넌트 UI를 제공합니다.

특징

jgdesign은 Atomic Design Pattern을 지향합니다.
jgdesign 라이브러리 자체에서 svg, 색상 등을 지원하지 않습니다(기본 검정, 하양) 하지만 svg, 색상 등을 직접 설정할 수 있게 설계 되어 있습니다.

설치 방법

npm install jgdesign
&
npm i jgdesign

사용 방법

jgdesign을 사용하기 위해서는 import로 사용할 컴포넌트를 받아와야 합니다.

import { TextButtonBlack } from 'jgdesign';

jgdesign의 컴포넌트들은 전부 인라인 스타일을 지향합니다.

<TextButtonBlack label="Example Text" />
//ADD라는 내용을 포함한 TextButtonBlack 생성

jgdesign은 색상을 바꿀 수 있는 자율성을 지향합니다.

 <TextButtonColor label="Example Text" bgColor="#FF5733" />

jgdesign은 react icon 사용을 지향합니다.

import { FaBeer } from "@react-icons/all-files/fa/FaBeer";

<LogoButtonBlack
  Icon={FaBeer}
  iconSize={32}
  iconColor="#8133ff"
/>

UI 종류

Button

TextButtonBlack
TextButtonWhite
TextButtonColor
LogoButtonBlack
LogoButtonWhite
LogoButtonColor

components icons react-icons styled styled-components

7 months ago

7 months ago

8 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

8 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago