@chakra-ui/react

@chakra-ui/react

Version 2.0.2
Published 4 hours ago
76.2 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

Variables

variable ChakraProvider

const ChakraProvider: {
    ({ children, toastOptions, ...restProps }: ChakraProviderProps): JSX.Element;
    defaultProps: {
        theme: {
            components: typeof import('@chakra-ui/theme/src/components');
            styles: import('@chakra-ui/theme-tools').Styles;
            config: import('@chakra-ui/theme').ThemeConfig;
            sizes: {
                container: { sm: string; md: string; lg: string; xl: string };
                max: string;
                min: string;
                full: string;
                '3xs': string;
                '2xs': string;
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
                '3xl': string;
                '4xl': string;
                '5xl': string;
                '6xl': string;
                '7xl': string;
                '8xl': string;
                px: string;
                0.5: string;
                1: string;
                1.5: string;
                2: string;
                2.5: string;
                3: string;
                3.5: string;
                4: string;
                5: string;
                6: string;
                7: string;
                8: string;
                9: string;
                10: string;
                12: string;
                14: string;
                16: string;
                20: string;
                24: string;
                28: string;
                32: string;
                36: string;
                40: string;
                44: string;
                48: string;
                52: string;
                56: string;
                60: string;
                64: string;
                72: string;
                80: string;
                96: string;
            };
            shadows: {
                xs: string;
                sm: string;
                base: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
                outline: string;
                inner: string;
                none: string;
                'dark-lg': string;
            };
            space: {
                px: string;
                0.5: string;
                1: string;
                1.5: string;
                2: string;
                2.5: string;
                3: string;
                3.5: string;
                4: string;
                5: string;
                6: string;
                7: string;
                8: string;
                9: string;
                10: string;
                12: string;
                14: string;
                16: string;
                20: string;
                24: string;
                28: string;
                32: string;
                36: string;
                40: string;
                44: string;
                48: string;
                52: string;
                56: string;
                60: string;
                64: string;
                72: string;
                80: string;
                96: string;
            };
            borders: {
                none: number;
                '1px': string;
                '2px': string;
                '4px': string;
                '8px': string;
            };
            transition: {
                property: {
                    common: string;
                    colors: string;
                    dimensions: string;
                    position: string;
                    background: string;
                };
                easing: {
                    'ease-in': string;
                    'ease-out': string;
                    'ease-in-out': string;
                };
                duration: {
                    'ultra-fast': string;
                    faster: string;
                    fast: string;
                    normal: string;
                    slow: string;
                    slower: string;
                    'ultra-slow': string;
                };
            };
            letterSpacings: {
                tighter: string;
                tight: string;
                normal: string;
                wide: string;
                wider: string;
                widest: string;
            };
            lineHeights: {
                normal: string;
                none: number;
                shorter: number;
                short: number;
                base: number;
                tall: number;
                taller: string;
                '3': string;
                '4': string;
                '5': string;
                '6': string;
                '7': string;
                '8': string;
                '9': string;
                '10': string;
            };
            fontWeights: {
                hairline: number;
                thin: number;
                light: number;
                normal: number;
                medium: number;
                semibold: number;
                bold: number;
                extrabold: number;
                black: number;
            };
            fonts: { heading: string; body: string; mono: string };
            fontSizes: {
                xs: string;
                sm: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
                '3xl': string;
                '4xl': string;
                '5xl': string;
                '6xl': string;
                '7xl': string;
                '8xl': string;
                '9xl': string;
            };
            breakpoints: import('@chakra-ui/theme-tools').Breakpoints<{
                sm: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
            }>;
            zIndices: {
                hide: number;
                auto: string;
                base: number;
                docked: number;
                dropdown: number;
                sticky: number;
                banner: number;
                overlay: number;
                modal: number;
                popover: number;
                skipLink: number;
                toast: number;
                tooltip: number;
            };
            radii: {
                none: string;
                sm: string;
                base: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
                '3xl': string;
                full: string;
            };
            blur: {
                none: number;
                sm: string;
                base: string;
                md: string;
                lg: string;
                xl: string;
                '2xl': string;
                '3xl': string;
            };
            colors: {
                transparent: string;
                current: string;
                black: string;
                white: string;
                whiteAlpha: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                blackAlpha: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                gray: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                red: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                orange: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                yellow: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                green: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                teal: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                blue: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                cyan: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                purple: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                pink: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                linkedin: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                facebook: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                messenger: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                whatsapp: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                twitter: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
                telegram: {
                    50: string;
                    100: string;
                    200: string;
                    300: string;
                    400: string;
                    500: string;
                    600: string;
                    700: string;
                    800: string;
                    900: string;
                };
            };
            semanticTokens: {
                colors: {
                    'chakra-body-text': { _light: string; _dark: string };
                    'chakra-body-bg': { _light: string; _dark: string };
                    'chakra-border-color': { _light: string; _dark: string };
                    'chakra-placeholder-color': { _light: string; _dark: string };
                };
            };
            direction: 'ltr';
        };
    };
};

Functions

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['colorScheme'];
    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['size'];
    components?: string[] | Dict;
}) => ThemeExtension;

function withDefaultVariant

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

Interfaces

interface ChakraProviderProps

interface ChakraProviderProps extends BaseChakraProviderProps {}

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 (7)

Dependencies (47)

Dev Dependencies (5)

Peer Dependencies (5)

Badge

To add a badge like this oneto 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>

Updated 40 minutes ago.
Package analyzed in 1046 ms.
Missing or incorrect documentation? Open an issue for this package.