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.

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.

Basic Example

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.

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

Controlled Example

The ThemeEditor component uses the useDisclosureProps() hook from Chakra UI and it accepts all the: UseDisclosureProps props. So, you can control the open/closed state of the drawer by passing the isOpen prop.

function MyThemeEditor() {
  const [isOpen, setIsOpen] = React.useState(false)
  const onClick = () => setIsOpen(!isOpen)
  const onClose = () => setIsOpen(false)

  return (
    <>
      <Button colorScheme="blue" letterSpacing="wider" onClick={onClick}>
        Click me to open the drawer
      </Button>

      <ThemeEditor isOpen={isOpen} onClose={onClose}>
        <ThemeEditorDrawer />
      </ThemeEditor>
      <pre>isOpen === {JSON.stringify(isOpen)}</pre>
    </>
  )
}

Props

This component accepts also UseDisclosureProps from the Chakra UI useDisclosure() hook, read more here.

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