vike-react

React integration for Vike, see vike.dev/react.

• Documentation
• Examples
• Changelog

Introduction

UI framework Vike extensions like vike-react:

• implement Vike Core hooks (e.g. onRenderHtml()) on your behalf,
• set Vike Core settings on your behalf,
• introduce new hooks for you to implement if needed,
• introduce new settings for you to set if needed,
• introduce new components and component hooks.

Scaffold new app

Use Bati to scaffold a Vike app using vike-react.

Add to existing app

To add vike-react to an existing Vike app:

1. Install the vike-react npm package in your project:

npm install vike-react

2. Extend your existing Vike config files with vike-react:

 // /pages/+config.js

+import vikeReact from 'vike-react/config'
+
 export default {
   // Existing Vike Core settings
   // ...
+
+  // New setting introduced by vike-react:
+  title: 'My Vike + React App',
+
+  extends: vikeReact
 }

Hooks

vike-react implements the onRenderHtml() and onRenderClient() hooks on your behalf, which are essentially the glue code between Vike and React.

Settings

vike-react sets the following Vike Core settings on your behalf:

• clientRouting=true: Enable Client Routing.
• hydrationCanBeAborted=true: React allows the hydration to be aborted.

vike-react introduces the following new settings:

• Head: Component Component to be rendered inside the `` tag.
• title: string <title>...</title> tag.
• favicon: string `` attribute.
• lang: string `` attribute.
• ssr: boolean Enable/disable Server-Side Rendering (SSR).
• stream: boolean Enable/disable HTML streaming.
• Layout: Component Wrapper for your Page component.
• Wrapper: Component Another wrapper for your Page component.

Component hooks

vike-react introduces the following new component hooks:

• useData(): Access the data that is returned by a data() hook from any component.
• usePageContext(): Access the pageContext object from any component.

Components

vike-react introduces the following new components:

• ClientOnly: Wrapper to render and load a component only on the client-side.