@charcoal-ui/react クイックスタート

インストール

npm

npm install @charcoal-ui/react

yarn

yarn add @charcoal-ui/react

利用方法

@charcoal-ui/styledと合わせて使用してください。ThemeProvider,TokenInjectorを使用してください。詳しくは @charcoal-ui/styledのクイックスタートを参照してください。

必要に応じてSSRProviderやOverlayProviderも使用してください。

また、ThemeProvider、TokenInjector、SSRProvider、OverlayProviderを内包したCharcoalProviderを使用することもできます。

import { CharcoalProvider } from '@charcoal-ui/react'
import { prefersColorScheme, themeSelector } from '@charcoal-ui/styled'
import { dark, light } from '@charcoal-ui/theme'
import { FC, ReactNode } from 'react'

export const CharcoalProviderExample: FC<{ children: ReactNode }> = ({
  children,
}) => {
  return (
    <CharcoalProvider
      themeMap={{
        ':root': light,
        [themeSelector('light')]: light,
        [themeSelector('dark')]: dark,
        [prefersColorScheme('dark')]: dark,
      }}
    >
      {children}
    </CharcoalProvider>
  )
}