Context

Swizzle provides a global context for you. You can add variables here that should be available to every component and page.

Add global variables

Open the Context.tsx file and add state variables inside the appContext function

export function appContext() {
  // Add more state variables as needed
  const [example, setExample] = useState('')

  // Make sure to return the state variables here.
  return { example, setExample }
}

Use global variables

Import the context provider.

import { useAppContext } from '../Context'

Then use the variables inside your component:

const { example } = useAppContext()

...

<div>{example}</div>