0.1.12 โข Published 3 years ago
@ssg-ui/components v0.1.12
ssg-ui
Introduction ๐
- ssg-ui/components๋ React, chakra-ui ๊ธฐ๋ฐ์ ssg-ui ๋์์ธ ์์คํ ์ปดํฌ๋ํธ ๋ผ์ด ๋ธ๋ฌ๋ฆฌ์ ๋๋ค.
- ์ ์ฐํ๊ณ ํ์ฅ์ฑ์ด ์์ต๋๋ค.
- WAI_ARIA ์น์ ๊ทผ์ฑ ์ง์นจ์ ์ค์ํฉ๋๋ค.
- ๋คํฌ๋ชจ๋๋ฅผ ์ง์ํฉ๋๋ค.
Installing SSG UI Components ๐
$ yarn add @ssg-ui/components framer-motion @emotion/react @emotion/styled
# or
$ npm install --save @ssg-ui/components framer-motion @emotion/react @emotion/styled
Getting Started ๐
ssg ui ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด, ์๋์ ์์๋ฅผ ๋ฐ๋ผํด์ฃผ์ธ์. To start using the components, please follow these steps:
- @ssg-ui/components์
SsgThemeProvider, ColorModeProvider
๋ก ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ํํด์ฃผ์ธ์.
import { ThemeProvider, ColorModeProvider } from "@ssg-ui/components";
const App = ({ children }) => (
<SsgThemeProvider>
<ColorModeProvider>{children}</ColorModeProvider>
</SsgThemeProvider>
);
ColorModeProvider
๋ ์ปดํฌ๋ํธ์ ๋ผ์ดํธ ๋ชจ๋์ ์ปฌ๋ฌ ๋ชจ๋๋ฅผ ์ ๊ณตํ๋ ์ปจํ
์คํธ ํ
๋ก๋ฐ์ด๋์
๋๋ค. ์์คํ
์ ์ปฌ๋ฌ ๋ชจ๋๋ฅผ ์ฌ์ฉํ ์๋ ์๊ณ , ์ปค์คํ
์ปฌ๋ฌ ๋ชจ๋๋ฅผ ์ฌ์ฉํ
์๋ ์์ต๋๋ค. ์์ธํ ์ฌ์ฉ๋ฒ์ chakra-ui ๊ณต์๋ฌธ์
(https://chakra-ui.com/docs/features/color-mode)๋ฅผ ์ฐธ์กฐํด์ฃผ์๊ธฐ ๋ฐ๋๋๋ค.
- ์ด์ ๋ ์ปดํฌ๋ํธ๋ฅผ ์ฌ์ฉํ์ค ์ ์์ต๋๋ค.
import { Button } from "@ssg-ui/components";
const MyComponent = () => <Button>SSG-UI ๋ฒํผ์ ์ฌ์ฉํฉ๋๋ค.</Button>;