Stone.js - Use React

React integration for Stone.js, universal rendering, SSR hydration, layouts, pages, snapshots, head management, and more.

Overview

@stone-js/use-react connects the Stone.js Continuum Architecture to the React ecosystem.

It provides:

• Universal rendering for SSR and SPA
• Powerful Page and Layout components with optional decorators
• A smart Snapshot system to sync server/client state seamlessly
• Dynamic <StoneLink>, <StoneClient>, and <StoneServer> rendering
• Integration hooks for popular tools and design systems

Use it to build fully reactive apps that run everywhere, Node.js, the browser, or serverless platforms, without giving up fine-grained control over context and rendering strategy.

Installation

npm install @stone-js/use-react

[!IMPORTANT] This package is pure ESM. Make sure your package.json includes "type": "module" or configure your bundler accordingly.

Usage

This package is designed to be used inside a Stone.js app and integrates deeply with its lifecycle, adapter system, and blueprint configuration.

You can define Pages and Layouts:

import { Page } from '@stone-js/use-react'

@Page('/about')
export class AboutPage {
  render() {
    return <div>About Stone.js</div>
  }
}

You can hydrate data with snapshots:

import { Stone } from '@stone-js/core'
import { Snapshot } from '@stone-js/use-react'

@Stone({ alias: 'userService' })
export class UserService {
  @Snapshot()
  showProfile() {
    return { name: 'John Doe' }
  }
}

You can render elements conditionally:

<StoneClient>Visible on client</StoneClient>
<StoneServer>Visible on server</StoneServer>

And much more.

Learn More

This package is part of the Stone.js ecosystem, a modern JavaScript framework built around the Continuum Architecture.

Explore the full documentation: https://stonejs.dev

API documentation

• API

Contributing

See Contributing Guide