https://github.com/stone-foundation/stone-js-use-react

Universal React integration for Stone.js, supports SSR, SPA, pages, layouts, head management, and snapshots. Build context-aware apps with full rendering control.
https://github.com/stone-foundation/stone-js-use-react

context-aware continuum-architecture csr javascript react spa ssr stone-foundation stonejs stonejs-react typescript

Last synced: 3 months ago
JSON representation

Universal React integration for Stone.js, supports SSR, SPA, pages, layouts, head management, and snapshots. Build context-aware apps with full rendering control.

• Host: GitHub
• URL: https://github.com/stone-foundation/stone-js-use-react
• Owner: stone-foundation
• License: mit
• Created: 2025-01-16T05:01:14.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2025-10-05T05:07:32.000Z (9 months ago)
• Last Synced: 2025-10-05T12:21:03.174Z (9 months ago)
• Topics: context-aware, continuum-architecture, csr, javascript, react, spa, ssr, stone-foundation, stonejs, stonejs-react, typescript
• Language: TypeScript
• Homepage: https://stonejs.dev
• Size: 208 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Codeowners: .github/CODEOWNERS
  • Security: SECURITY.md

Awesome Lists containing this project

README

          
# Stone.js - Use React

[![npm](https://img.shields.io/npm/l/@stone-js/use-react)](https://opensource.org/licenses/MIT)

[![npm](https://img.shields.io/npm/v/@stone-js/use-react)](https://www.npmjs.com/package/@stone-js/use-react)

[![npm](https://img.shields.io/npm/dm/@stone-js/use-react)](https://www.npmjs.com/package/@stone-js/use-react)

![Maintenance](https://img.shields.io/maintenance/yes/2025)

[![Build Status](https://github.com/stone-foundation/stone-js-use-react/actions/workflows/main.yml/badge.svg)](https://github.com/stone-foundation/stone-js-use-react/actions/workflows/main.yml)

[![Publish Package to npmjs](https://github.com/stone-foundation/stone-js-use-react/actions/workflows/release.yml/badge.svg)](https://github.com/stone-foundation/stone-js-use-react/actions/workflows/release.yml)

[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=stone-foundation_stone-js-use-react&metric=alert_status)](https://sonarcloud.io/summary/new_code?id=stone-foundation_stone-js-use-react)

[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=stone-foundation_stone-js-use-react&metric=coverage)](https://sonarcloud.io/summary/new_code?id=stone-foundation_stone-js-use-react)

[![Security Policy](https://img.shields.io/badge/Security-Policy-blue.svg)](./SECURITY.md)

[![CodeQL](https://github.com/stone-foundation/stone-js-use-react/actions/workflows/github-code-scanning/codeql/badge.svg)](https://github.com/stone-foundation/stone-js-use-react/security/code-scanning)

[![Dependabot Status](https://img.shields.io/badge/Dependabot-enabled-brightgreen.svg)](https://github.com/stone-foundation/stone-js-use-react/network/updates)

[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)

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 ``, ``, and `` 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

```bash

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:

```ts

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

@Page('/about')

export class AboutPage {

  render() {

    return 
About Stone.js

  }

}

```


You can hydrate data with snapshots:

```ts

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:

```tsx

Visible on client

Visible on server

```

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](https://stonejs.dev)

## API documentation

* [API](https://github.com/stone-foundation/stone-js-use-react/blob/main/docs)

## Contributing

See [Contributing Guide](https://github.com/stone-foundation/stone-js-use-react/blob/main/CONTRIBUTING.md)