ThemeEditorDrawerFooter

The ThemeEditorDrawerFooter component is the default footer component rendered inside the ThemeEditorDrawer.

It provides a Close Drawer Button and the Export Theme Menu.

Import

Community Version

import { ThemeEditorDrawerFooter } from '@hypertheme-editor/chakra-ui'

Pro Version PRO

import { ThemeEditorDrawerFooter } from '@hypertheme-editor-pro/chakra-ui'

Usage

ThemeEditorDrawerFooter works with the footerComponent prop prop provided by the ThemeEditorDrawer component.

This is a minimal example explaining how to use the component:

function MyThemeEditor(props) {
  const onClick = () => alert('Hello world')

  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer footerComponent={<ThemeEditorDrawerFooter />} />
    </ThemeEditor>
  )
}

Props

actionButton

By default the ThemeEditorDrawerFooter renders a ThemeDownloadButton (like in the image below).

The ThemeDownloadButton acts as a downloader for the theme using the HyperTheme API.

You can override this button putting your custom component, like in the example below:

function MyThemeEditor(props) {
  const { theme } = useThemeEditor()

  const onCustomSaveClick = React.useCallback(() => {
    console.log(theme)
    // save the current theme here
  }, [theme])

  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer
        footerComponent={
          <ThemeEditorDrawerFooter
            actionButton={<Button onClick={onCustomSaveClick}>Custom Save</Button>}
          />
        }
      />
    </ThemeEditor>
  )
}

This prop accepts a ReactElement value.

onClose

The onClose prop is called when clicking on the "close drawer" button.

This prop is overrided by the ThemeEditorDrawer component, so you don't have to mind it.

isMobile

The isMobile prop decides whenever to render the footer or not if on mobile device.

This prop is overrided by the ThemeEditorDrawer component, so you don't have to mind it.

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting