@chakra-ui/react

  • Version 2.3.2
  • Published
  • 28.7 kB
  • 47 dependencies
  • MIT license

Install

npm i @chakra-ui/react
yarn add @chakra-ui/react
pnpm add @chakra-ui/react

Overview

Responsive and accessible React UI components built with React and Emotion

Index

Functions

function ChakraProvider

ChakraProvider: ({
children,
theme,
toastOptions,
...restProps
}: ChakraProviderProps) => JSX.Element;

    function extendTheme

    extendTheme: (...extensions: any[]) => Dict;
    • NOTE: This got too complex to manage, and it's not worth the extra complexity. We'll re-evaluate this API in the future releases.

      Function to override or customize the Chakra UI theme conveniently. First extension overrides the baseTheme and following extensions override the preceding extensions.

      @example: import { theme as baseTheme, extendTheme, withDefaultColorScheme } from '@chakra-ui/react'

      const customTheme = extendTheme( { colors: { brand: { 500: "#b4d455", }, }, }, withDefaultColorScheme({ colorScheme: "red" }), baseTheme // optional )

    function mergeThemeOverride

    mergeThemeOverride: (...overrides: any[]) => any;

      function withDefaultColorScheme

      withDefaultColorScheme: ({
      colorScheme,
      components,
      }: {
      colorScheme: ThemingProps;
      components?: string[] | Dict;
      }) => ThemeExtension;

        function withDefaultProps

        withDefaultProps: ({
        defaultProps: { colorScheme, variant, size },
        components,
        }: {
        defaultProps: ComponentDefaultProps;
        components?: string[] | Dict;
        }) => (theme: Dict) => any;

          function withDefaultSize

          withDefaultSize: ({
          size,
          components,
          }: {
          size: ThemingProps;
          components?: string[] | Dict;
          }) => ThemeExtension;

            function withDefaultVariant

            withDefaultVariant: ({
            variant,
            components,
            }: {
            variant: ThemingProps;
            components?: string[] | Dict;
            }) => ThemeExtension;

              Interfaces

              interface ChakraProviderProps

              interface ChakraProviderProps extends ChakraProviderProps$1 {}

                property toastOptions

                toastOptions?: ToastProviderProps;
                • Provide defaults for useToast() usages for ChakraProviders children

                Type Aliases

                type BaseThemeWithExtensions

                type BaseThemeWithExtensions<
                BaseTheme extends ChakraTheme,
                Extensions extends readonly [...any]
                > = BaseTheme &
                (Extensions extends [infer L, ...infer R]
                ? L extends AnyFunction
                ? ReturnType<L> & BaseThemeWithExtensions<BaseTheme, R>
                : L & BaseThemeWithExtensions<BaseTheme, R>
                : Extensions);

                  type DeepPartial

                  type DeepPartial<T> = {
                  [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
                  };

                    type ThemeExtension

                    type ThemeExtension<Override extends ThemeOverride = ThemeOverride> = (
                    themeOverride: Override
                    ) => Override;

                      type ThemeOverride

                      type ThemeOverride<BaseTheme = Theme> = DeepPartial<ChakraTheme> &
                      DeepThemeExtension<BaseTheme, ChakraTheme> &
                      Dict;

                        Package Files (1)

                        Dependencies (47)

                        Dev Dependencies (5)

                        Peer Dependencies (5)

                        Badge

                        To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                        You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/@chakra-ui/react.

                        • Markdown
                          [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@chakra-ui/react)
                        • HTML
                          <a href="https://www.jsdocs.io/package/@chakra-ui/react"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>