useSSRWidth

Category

Browser

Export Size

177 B

Last Changed

5 days ago

Used to set a global viewport width which will be used when rendering SSR components that rely on the viewport width like useMediaQuery or useBreakpoints

Demo

Usage

Provide the width above the tree while rendering on the server, so the server markup and the first client render already agree on it

import { SSRWidthProvider } from '@reause/core'
import { renderToString } from 'react-dom/server'

const html = renderToString(
  <SSRWidthProvider width={500}>
    <App />
  </SSRWidthProvider>,
)

Or in the root component

import { SSRWidthProvider } from '@reause/core'

function App() {
  return (
    <SSRWidthProvider width={500}>
      <MyComponent />
    </SSRWidthProvider>
  )
}

To retrieve the provided value if you need it in a subcomponent

import { useSSRWidth } from '@reause/core'

function MyComponent() {
  const [width, setWidth] = useSSRWidth()

  return <div>{`Width: ${width}px`}</div>
}

Type Declarations

export interface SSRWidthProviderProps {
    width?: number | null;
}

export type UseSSRWidthReturn = [
    width: number | undefined,
    setWidth: (width: number | null) => void
]

export function SSRWidthProvider(props: PropsWithChildren<SSRWidthProviderProps>): ReactNode

export function useSSRWidth(): UseSSRWidthReturn

Source

Source · Demo

Contributors

Changelog

v0.1.7 on

4c614 - fix(docs): remove the duplicated provenance claims for useSSRWidth and useSortable (#995)

v0.1.0 on

6a2f2 - feat(core): implement useSSRWidth with SSRWidthProvider (#226)