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')exportclassAboutPage{render(){return<div>AboutStone.js</div>}}

You can hydrate data with snapshots:

import{Stone}from'@stone-js/core'import{Snapshot}from'@stone-js/use-react'
@Stone({alias: 'userService'})exportclassUserService{
@Snapshot()showProfile(){return{name: 'John Doe'}}}

You can render elements conditionally:

<StoneClient>Visible on client</StoneClient><StoneServer>Visibleonserver</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