Nine Pedestrians Mesmerized

    This package has been deprecated

    Author message:

    Chakra v0 is no longer supported. Please upgrade to Chakra UI v1 and @chakra-ui/gatsby-plugin. Visit https://chakra-ui.com/ for more information.

    gatsby-plugin-chakra-ui

    0.1.5 • Public • Published

    🚨 Chakra v0 is no longer supported and this plugin is likely broken! Please upgrade to Chakra UI v1 and use @chakra-ui/gatsby-plugin instead. Visit https://chakra-ui.com/ for more information. 🚨

    gatsby-plugin-chakra-ui

    Drop-in Chakra UI support for Gatsby sites

    Installation

    To use Chakra UI in your Gatsby site, you need to install the plugin and its peer dependencies.

    $ yarn add gatsby-plugin-chakra-ui @chakra-ui/core @emotion/core @emotion/styled emotion-theming
    

    Usage

    Basic

    1. Add gatsby-plugin-chakra-ui as a plugin in your Gatsby config.
    // gatsby-config.js
    module.exports = {
      plugins: ["gatsby-plugin-chakra-ui"],
    };
    1. Use Chakra
    // src/pages/index.js
    import React from "react";
    import { Box, Text } from "@chakra-ui/core";
    
    function IndexPage() {
      return (
        <Box p={8}>
          <Text fontSize="xl">Hello World</Text>
        </Box>
      );
    }
    
    export default IndexPage;

    Gatsby plugin options

    By default, this plugin makes use of Chakra CSS reset component and color mode context:

    <ThemeProvider theme={theme}>
      <CSSReset />
      <ColorModeProvider>{element}</ColorModeProvider>
    </ThemeProvider>

    You can disable either of these with Gatsby options:

    // gatsby-config.js
    module.exports = {
      plugins: [
        {
          resolve: "gatsby-plugin-chakra-ui",
          options: {
            /**
             * @property {boolean} [isResettingCSS=true]
             * if false, this plugin will not use `<CSSReset />
             */
            isResettingCSS: true,
            /**
             * @property {boolean} [isUsingColorMode=true]
             * if false, this plugin will not use <ColorModeProvider />
             */
            isUsingColorMode: true,
          },
        },
      ],
    };

    Custom theme

    To use custom theme, you can shadow this plugin's theme.js file with your own theme:

    // src/gatsby-plugin-chakra-ui/theme.js
    const theme = {};
    
    export default theme;

    You can learn more about custom theme at Chakra UI's documentation.

    By default, Chakra provides a sensible default theme inspired by Tailwind CSS.

    Install

    npm i gatsby-plugin-chakra-ui

    DownloadsWeekly Downloads

    267

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    4.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar