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

Upgrading to v0.1

HyperTheme Editor v0.1 release comes with a lot more developer features.

The 0.0.31 version is very minimal and provides only the components:

  • ThemeEditorProvider
  • ThemeEditorDrawerButton

The new v0.1 release instead provides all the building blocks necessary to create custom theme editors for Chakra UI.

Upgrade

In the v0.1 version the ThemeEditorDrawerButton has been renamed to: HyperThemeEditor, it still accepts all props from Chakra UI ButtonProps.

The ThemeEditorProvider still exists and hasn't changed since the v0.0.31.

To upgrade just swap the ThemeEditorDrawerButton with the HyperThemeEditor.

1. Change the import

Community version

- import { ThemeEditorDrawerButton } from '@hypertheme-editor/chakra-ui'
+ import { HyperThemeEditor } from '@hypertheme-editor/chakra-ui'

Pro version PRO

- import { ThemeEditorDrawerButton } from '@hypertheme-editor-pro/chakra-ui'
+ import { HyperThemeEditor } from '@hypertheme-editor-pro/chakra-ui'

2. Swap the component

Now you have just to use the new component.

HyperThemeEditor accepts the same props as ThemeEditorDrawerButton, so you don't have to change them.

- <ThemeEditorDrawerButton pos="fixed" bottom={4} right={2} />
+ <HyperThemeEditor pos="fixed" bottom={4} right={2} />

Next Steps

That's all! Now that you've upgraded to v0.1, it's time to create custom editors!

Check the next page to start.


Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting

Table of content

  • Upgrade
  • 1. Change the import
  • 2. Swap the component
  • Next Steps