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

ThemeEditorDrawerHeader

ThemeEditorDrawerHeader


The ThemeEditorDrawerHeader component is the default header component rendered inside the ThemeEditorDrawer.

It provides undo/redo functionalities, the ColorModeToggle, a Reset Theme Button and the Close Drawer Button.

  • View source

  • Import

    Community Version

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

    Pro Version PRO

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

    Usage

    ThemeEditorDrawerHeader works with the headerComponent prop provided by the ThemeEditorDrawer component.

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

    Props

    NameTypeDefaultShort Description
    onClose() => voidundefinedCallback that closes the ThemeEditorDrawer

    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.


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

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