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

ThemeEditor

ThemeEditor is the wrapper for the ThemeEditorButton and ThemeEditorDrawer components.

It manages the open/closed states of the drawer and it provides the "HyperTheme Editor Chakra UI theme" (click here to see it on NPM) used by the editor itself.

  • View source

  • if you want to create a custom theme editor without breaking the editor UI itself, you have to use this component.

    Import

    Community Version

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

    Pro Version PRO

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

    Usage

    The ThemeEditor component is used to build custom theme editors that uses ThemeEditorDrawer and ThemeEditorButton components.

    In this example you see a minimal custom MyThemeEditor with an empty ThemeEditorDrawer and the default ThemeEditorButton.

    You should see that the drawer is opening and closing correctly.

    Props

    NameTypeDefaultShort Description
    childrenThemeEditorButton | ThemeEditorDrawerundefinedcomponents that need to be used for the ThemeEditor

    children

    The ThemeEditor component pass the isOpen, onOpen and onClose props to its children.

    Children must be of type ThemeEditorDrawer or ThemeEditorButton.


    Hyper kit

    Made with ❤️ in 🇮🇹 | byHyperting

    Table of content

    • Import
    • Community Version
    • Pro Version
    • Usage
    • Props
    • children