HyperTheme

Editor v0.1.2

PricingDocsChangelog

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

ThemeEditorButton


The ThemeEditorButton renders a ready-made button that opens the ThemeEditorDrawer.

It should be used as a direct child of ThemeEditor component.

  • View source

  • Import

    Community Version

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

    Pro Version PRO

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

    Usage

    This component doesn't work on itself, it must be a direct child of the ThemeEditor component.

    Simple Usage

    Here's an example of a theme editor with a standard ThemeEditorButton:

    ButtonProps Customization

    ThemeEditorButton accepts all props from Chakra UI ButtonProps, this example demonstrate how the customization can be done:

    Props

    NameTypeDefaultShort Description
    onOpen() => voidundefinedCallback that opens the ThemeEditorDrawer
    labelstringundefinedAn optional label

    This component accepts also ButtonProps from the Chakra UI Button component, read more here.

    onOpen

    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.

    label

    An optional label to show.

    Here's an example:


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Simple Usage
    • ButtonProps Customization
    • Props
    • onOpen
    • label