Search
Docs Menu
API
Get Started
Blog
Edit

+Wrapper

Environment: client, and server if ssr: true
Local
Cumulative
Provided by: vike-react/vike-solid

You need vike-react/vike-solid to be able to use the +Wrapper setting.

The +Wrapper component wraps the +Page component and all +Layout components.

<Wrapper>     ⟸ component defined by +Wrapper
  <Layout>    ⟸ component defined by +Layout
    <Page />  ⟸ component defined by +Page
  </Layout>
</Wrapper>
// pages/+Wrapper.jsx
 
import React from 'react'
 
// `children` includes +Page and all +Layout components
export default function Wrapper({ children }) {
  return <MyWrapper>{children}</MyWrapper>
}
// pages/+Wrapper.tsx
 
import React from 'react'
 
// `children` includes +Page and all +Layout components
export default function Wrapper({ children }: { children: React.ReactNode }) {
  return <MyWrapper>{children}</MyWrapper>
}

The +Wrapper component is usually used for integrating tools, such as tools for data fetching and state management.

The only difference between +Wrapper and +Layout is that +Wrapper wraps +Layout.

To integrate tools, we generally recommend +Wrapper over +Layout, as it ensures that all +Layout components are also wrapped.

To define your pages' visual appearance, we generally recommend +Layout.

A page can be wrapped by multiple +Wrapper components:

<Wrapper1>
  <Wrapper2>
    <Wrapper3>
      <Layout>
        <Page />
      </Layout>
    </Wrapper3>
  </Wrapper2>
</Wrapper1>

pageContext

You can access the pageContext object by using usePageContext().

// /pages/+Layout.jsx
 
import React from 'react'
import { usePageContext } from 'vike-react/usePageContext' // or vike-{vue,solid}
 
export function Layout({ children }) {
  const pageContext = usePageContext()
  // ...
}
// /pages/+Layout.tsx
 
import React from 'react'
import { usePageContext } from 'vike-react/usePageContext' // or vike-{vue,solid}
 
export function Layout({ children }: { children: React.ReactNode }) {
  const pageContext = usePageContext()
  // ...
}

See also