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.
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
Chromatic hosts our Storybooks for both the stable and development versions. You can view the components and their documentation here:
For the stable and development versions of the Geunwoo/React Design System, visit the NPM package page:
You can find various examples in our documentation.
/* 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>
)
}/* 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>
)
}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>
);
}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;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;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;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;