Hooks

Hooks for using global AppState and color mode theme state.

useSiteMetadata

Easy to use site metadata.

import { useSiteMetadata } from '@cieloazul310/gatsby-theme-aoi';

function Example() {
  const { title, description } = useSiteMetadata();
}

useAppState

Returns current global AppState.

count: 0
appBarPosition: fixed

import { useAppState } from '@cieloazul310/gatsby-theme-aoi';

// for safe typing
// import { useAppState } from '../@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext';

const { count, appBarPosition } = useAppState();

useDispatch

Returns dispatch of global AppState.

import { useDispatch } from '@cieloazul310/gatsby-theme-aoi';

// or shadowing appState
// import { useDispatch } from '../@cieloazul310/gatsby-theme-aoi-top-layout/utils/AppStateContext';

const increment = () => {
  dispatch({ type: 'INCREMENT' });
};
const onButtonClick = (newValue: AppState['appBarPosition']) => () => {
  dispatch({ type: 'SET_APPBAR_POSITION', appBarPosition: newValue });
};

<Stack spacing={2}>
  <Button variant="contained" onClick={increment}>
    Increment
  </Button>
  <ButtonGroup>
    {(
      [
        'sticky',
        'fixed',
        'relative',
        'static',
      ] as AppState['appBarPosition'][]
    ).map((value) => (
      <Button key={value} onClick={onButtonClick(value)}>
        {value}
      </Button>
    ))}
  </ButtonGroup>
</Stack>

useThemeContextState

Returns theme Context State.

darkMode: false
useSystemTheme: false

import { useThemeContextState } from '@cieloazul310/gatsby-theme-aoi';

const { darkMode, useSystemTheme } = useThemeContextState();

useToggleDark

Returns callback to toggle lightmode / darkmode state.

import { useToggleDark } from '@cieloazul310/gatsby-theme-aoi';

const toggleDark = useToggleDark();

<Button variant="contained" onClick={toggleDark}>
  Toggle Dark
</Button>

useToggleUseSystem

Returns callback to toggle useSystemTheme (enable auto dark mode) state.

import { useToggleUseSystem } from '@cieloazul310/gatsby-theme-aoi';

const toggleUseSystem = useToggleUseSystem();

<Button variant="contained" onClick={toggleUseSystem}>
  Toggle Use System Theme
</Button>

Top Tips