@no-css/react

React bindings for the @no-css/core runtime. The adapter turns Elm UI layout trees
into idiomatic React components so product teams can adopt the TypeScript port without
rebuilding design tokens or runtime guarantees.

Quick Start

1. Install the pre-release packages alongside React 18:

``bash
npm install @no-css/core@beta @no-css/react@beta react@^18.2.0 react-dom@^18.2.0
`

2. Build an Element tree and render it through the adapter:

`tsx
import { createElementTree } from '@no-css/core';
import { ElementProvider, ElementTree, Row, Column, Text } from '@no-css/react';

const tree = createElementTree('column', {}, [
createElementTree('text', { textContent: 'Hello from core' }),
]);

export function App() {
return (



);
}
`

3. For component-first usage, compose directly with the layout primitives:

`tsx
import { Row, Column, Text } from '@no-css/react';

export function LayoutExample() {
return (


Actual text


Another column


);
}
`

Rendering Environments

$3

The adapter works out-of-the-box in any browser environment. Simply import and use the components:

`tsx
import { createRoot } from 'react-dom/client';
import { Row, Column, Text } from '@no-css/react';

function App() {
return (


Client-side rendered content


);
}

const container = document.getElementById('root');
createRoot(container).render();
`

CSR Features:
- Dynamic style injection into via the Style Bundle Manager
- Automatic class name generation matching Elm semantics
- Full React hooks support (useElementTree, useStyleSheetBundle)
- Hot module replacement during development

$3

For SSR environments (Next.js, Remix, etc.), use the provided SSR utilities to extract styles:

`tsx
import { renderToString } from 'react-dom/server';
import { extractStyles } from '@no-css/react/ssr';
import { Row, Column, Text } from '@no-css/react';

function App() {
return (

Server-rendered content

);
}

// Server-side: Extract critical CSS
const { html, styles } = extractStyles();

// Inject into HTML response
const fullHtml =

SSR Features:
- Critical CSS extraction for optimal initial page load
- Hydration-safe class name generation (matches server and client)
- Compatible with React 18 renderToPipeableStream and streaming SSR
- No client-side flash of unstyled content (FOUC)

SSR Requirements:
- Node.js 18+
- React 18.0.0+
- react-dom 18.0.0+

Framework-Specific Notes:
- Next.js: Use extractStyles in getServerSideProps or App Router Server Components
- Remix: Call extractStyles in your loader and inject styles in root route
- Vite SSR: Integrate in your server entry point before renderToString

API Reference

$3

- Align with shorthand props: left, centerX, right, stretchX plus the vertical variants
(top, centerY, bottom, stretchY).
- Accepts layout attributes (spacing, padding, width, height, dataset, pseudoStates, etc.)
from @no-css/core.
- Renders a