@geunwoo/react-design-system v2.2.7
Geunwoo/React Design System
Geunwoo/React Design System is a library built with React, TypeScript and Rollup. It provides a customizable and accessible library of components that can be used to speed up React application development.
Installation
To install the stable version, use the command below:
npm install @geunwoo/react-design-system
To install the development version, use the command below:
npm install @geunwoo/react-design-system@dev
Documentation
Chromatic hosts our Storybooks for both the stable and development versions. You can view the components and their documentation here:
Package
For the stable and development versions of the Geunwoo/React Design System, visit the NPM package page:
Examples
You can find various examples in our documentation.
Toast
/* main.tsx */
import { GProvider } from "@geunwoo/react-design-system";
ReactDOM.createRoot(document.getElementById('root')!).render(
<GProvider>
<App />
</GProvider>
)
/* How to use */
import { showGToast } from '@geunwoo/react-design-system';
function Example() {
const onClick = () => {
showGToast({
type: "success",
shape: "square",
title: "This is a sample title",
content:"This is a sample description",
titleFontSize: '16px',
contentFontSize: '14px',
width: '350px',
duration: 5000,
showToastIcon: true,
showCloseIcon: true
})
}
return (
<button onClick={onClick}>Click me!</button>
)
}
Alert
/* main.tsx */
import { GProvider } from "@geunwoo/react-design-system";
ReactDOM.createRoot(document.getElementById('root')!).render(
<GProvider>
<App />
</GProvider>
)
/* How to use */
import { showGAlert } from '@geunwoo/react-design-system';
function Example() {
const onClick = () => {
showGAlert({
title: "경고",
content: '정말 삭제하시겠습니까?',
type: "danger-dark",
position: 'center-center',
width: "300px",
height: "200px",
buttonHeight: '60px',
titleSize: '20px',
contentSize: '16px',
buttonTextSize: '18px',
titleAlignment: 'center',
contentAlignment: 'center',
titleVerticalAlignment: 'center',
contentVerticalAlignment: 'center',
confirmButtonText: "확인",
cancelButtonText: "취소",
showCancelButton: true,
onConfirm: () => {},
})
}
return (
<button onClick={onClick}>Click me!</button>
)
}
Pagination
import { GPagination } from '@geunwoo/react-design-system';
function Example() {
return (
<div>
<GPagination
page={1}
pageSize={10}
total={100}
onChangePage={(page: number) => {}}
type="danger-dark"
iconType="danger-dark"
weight="inline"
shape="circle"
maxPageButtons={5}
prevButtonText="Prev"
nextButtonText="Next"
showPrevButtonIcon={false}
showNextButtonIcon={false}
onShowContent={(page: number, pageSize: number) => {
return `Page ${page} of ${pageSize}`;
}}
/>
</div>
);
}
Loading
import { GLoading } from "@geunwoo/react-design-system";
function Example() {
return (
<div>
<GLoading
type="success"
iconSize="medium"
percentageSize="16px"
showPercentage={true}
percentage={72}
/>
</div>
);
}
export default Example;
ProgressBar
import { GProgressBar } from "@geunwoo/react-design-system";
function Example() {
return (
<div>
<GProgressBar
steps={60}
type="success-dark"
secondaryType="gray"
shape="circle"
width="100%"
stroke="2px"
/>
</div>
);
}
export default Example;
Label
import { GLabel } from "@geunwoo/react-design-system";
function Example() {
return (
<div>
<GLabel
type="success"
weight="inline"
fontSize="16px"
padding="14px 22px"
shape="circle"
value="Label"
/>
</div>
);
}
export default Example;
Button
import { GButton } from "@geunwoo/react-design-system";
function Example() {
return (
<div>
<GButton
types="danger-dark"
weight="outlined"
fontSize="14px"
padding="11px 18px"
shape="square"
label="Button"
disabled={false}
onClick={() => {}}
/>
</div>
);
}
export default Example;
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
10 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago