useThemeEditor

The useThemeEditor hook provides the core functionalities of HyperTheme Editor.

All the Editor Panels uses this hook to live edit the current theme.

It also provides undo/redo functionalities.

View source

If you want to create a custom theme editor, this is the hook you have to use.

Import

Known Issue!

Importing from @hypertheme-editor/chakra-ui-core leads to a known issue with recoil.
Be sure that you're importing only from @hypertheme-editor/chakra-ui or @hypertheme-editor-pro/chakra-ui.

Community Version

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

Pro Version PRO

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

Return value

The useThemeEditor hook returns an object containing everything you need to create a custom Chakra UI Theme Editor.

Here's a complete list of the returned object:

Name	Type	Description
`theme`	`Theme`	Current active theme
`initialTheme`	`Theme`	the initial Theme provided by the ChakraProvider component
`setTheme`	`(theme: Theme) => void`	set immediately a new theme, the `theme` param must be a complete Chakra UI theme object
`canUndo`	`boolean`	return `true` when undo history is not empty
`canRedo`	`boolean`	return `true` when redo history is not empty
`undo`	`() => void`	undo last theme change, calling this function causes a live edit
`redo`	`() => void`	redo last theme undo, calling this function causes a live edit

Usage

Retrieve current theme

function SaveThemeButton() {
  const { theme } = useThemeEditor()

  const handlePrintTheme = React.useCallback(() => {
    // do something with the theme
    alert(JSON.stringify(theme))
  }, [theme])

  return <Button onClick={handlePrintTheme}>Print Theme</Button>
}

function SaveThemeButton() {
  const { theme } = useThemeEditor()

  const handlePrintTheme = React.useCallback(() => {
    // do something with the theme
    alert(JSON.stringify(theme))
  }, [theme])

  return <Button onClick={handlePrintTheme}>Print Theme</Button>
}

Save current theme

In this example we're simulating a custom save button that saves the customized theme to an api.

As you have been noticed, this example is exactly the same of Retrieve current theme example:

function SaveThemeButton(props) {
  const { theme } = useThemeEditor()

  const handleSaveTheme = React.useCallback(() => {
    // alert the theme as test
    alert(JSON.stringify(theme))

    // save the theme to an api like this:
    // fetch('/themes', {
    //   method: 'post',
    //   headers: {
    //     Accept: 'application/json',
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify(theme),
    // })
  }, [theme])

  return (
    <Button onClick={handleSaveTheme} {...props}>
      Save Theme
    </Button>
  )
}

function SaveThemeButton(props) {
  const { theme } = useThemeEditor()

  const handleSaveTheme = React.useCallback(() => {
    // alert the theme as test
    alert(JSON.stringify(theme))

    // save the theme to an api like this:
    // fetch('/themes', {
    //   method: 'post',
    //   headers: {
    //     Accept: 'application/json',
    //     'Content-Type': 'application/json',
    //   },
    //   body: JSON.stringify(theme),
    // })
  }, [theme])

  return (
    <Button onClick={handleSaveTheme} {...props}>
      Save Theme
    </Button>
  )
}

setTheme example

In this example we're simply swapping the red.500 color with the blue.500 color.

This component is useless but it demonstrates that calling the setTheme causes an instant theme live edit:

function ChangeBlueColorButton(props) {
  const { theme, setTheme } = useThemeEditor()

  const handleSwapColors = React.useCallback(() => {
    setTheme({
      ...theme,
      colors: {
        ...theme.colors,
        blue: {
          ...theme.colors.blue,
          500: theme.colors.red[500],
        },
        red: {
          ...theme.colors.red,
          500: theme.colors.blue[500],
        },
      },
    })
  }, [theme])

  if (!theme) {
    return <Box>Loading...</Box>
  }

  return (
    <VStack>
      <Box h="40px" w="40px" borderRadius="lg" bgColor={theme.colors.blue[500]} />
      <Box h="40px" w="40px" borderRadius="lg" bgColor={theme.colors.red[500]} />
      <Button onClick={handleSwapColors}>Swap blue.500 with red.500</Button>
    </VStack>
  )
}

function ChangeBlueColorButton(props) {
  const { theme, setTheme } = useThemeEditor()

  const handleSwapColors = React.useCallback(() => {
    setTheme({
      ...theme,
      colors: {
        ...theme.colors,
        blue: {
          ...theme.colors.blue,
          500: theme.colors.red[500],
        },
        red: {
          ...theme.colors.red,
          500: theme.colors.blue[500],
        },
      },
    })
  }, [theme])

  if (!theme) {
    return <Box>Loading...</Box>
  }

  return (
    <VStack>
      <Box h="40px" w="40px" borderRadius="lg" bgColor={theme.colors.blue[500]} />
      <Box h="40px" w="40px" borderRadius="lg" bgColor={theme.colors.red[500]} />
      <Button onClick={handleSwapColors}>Swap blue.500 with red.500</Button>
    </VStack>
  )
}

Manage changes history

This example explains how to create custom undo/redo buttons.

function UndoRedoButtons() {
  const { canUndo, undo, canRedo, redo } = useThemeEditor()

  return (
    <ButtonGroup variant="outline" spacing="6">
      <Button disabled={!canUndo} onClick={undo}>
        Undo
      </Button>
      <Button disabled={!canRedo} onClick={redo}>
        Redo
      </Button>
    </ButtonGroup>
  )
}

function UndoRedoButtons() {
  const { canUndo, undo, canRedo, redo } = useThemeEditor()

  return (
    <ButtonGroup variant="outline" spacing="6">
      <Button disabled={!canUndo} onClick={undo}>
        Undo
      </Button>
      <Button disabled={!canRedo} onClick={redo}>
        Redo
      </Button>
    </ButtonGroup>
  )
}

Hyper kit

Made with ❤️ in 🇮🇹 | byHyperting

Getting Started

Guides

Components

Hooks

Editors