HyperTheme

Editor v0.1

DocsChangelog

Try it

Getting Started

InstallationPro InstallationPROUpgrade to v0.1

Guides

Create a Custom Editor Panel

Components

ThemeEditorProviderHyperThemeEditorThemeEditorThemeEditorDrawerThemeEditorDrawerHeaderThemeEditorDrawerFooterThemeEditorRootPanelThemeEditorButtonColorModeToggleThemeIcon

Hooks

useThemeEditor

Editors

ColorsFont SizesTypography PROFonts PROLine Heights PROLetter Spacing PROShadows PRORadii PROSpace PRO

ThemeEditorDrawerFooter

ThemeEditorDrawerFooter


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

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

  • View source

  • 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:

    Props

    NameTypeDefaultShort Description
    actionButtonReactNodeThemeDownloadButtonComponent rendered as action button
    onClose() => voidundefinedCallback that closes the ThemeEditorDrawer
    isMobilebooleanundefinedboolean that hides the footer if on mobile device

    actionButton

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

    ThemeDownloadButton

    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:

    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

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Props
    • actionButton
    • onClose
    • isMobile