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.

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:

function MyThemeEditor(props) {
  return (
    <ThemeEditor>
      <ThemeEditorButton {...props} />
      <ThemeEditorDrawer headerComponent={<ThemeEditorDrawerHeader />} />
    </ThemeEditor>
  )
}

Props

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