npm package: @strato-css/react
Description: React integration for Strato CSS framework
Latest version: 1.1.0

# @strato-css/react

React integration for Strato CSS framework. Provides React hooks and components for using Strato CSS in React applications.

## Installation

```bash
pnpm add @strato-css/react
```

## Usage

### useStrato Hook

The `useStrato` hook allows you to dynamically generate CSS classes in your React components.

```tsx
import { useStrato } from '@strato-css/react';

function MyComponent() {
  const classes = useStrato('p-4 bg-white rounded shadow');

  return <div className={classes}>Hello Strato CSS!</div>;
}
```

### useStratoTheme Hook

Access theme values in your components.

```tsx
import { useStratoTheme } from '@strato-css/react';

function ThemedComponent() {
  const theme = useStratoTheme();

  return (
    <div style={{ color: theme.colors.primary }}>
      Primary color
    </div>
  );
}
```

### useStratoStyle Hook

Generate CSS styles object from utility classes.

```tsx
import { useStratoStyle } from '@strato-css/react';

function StyledComponent() {
  const style = useStratoStyle('p-4 m-2 bg-white');

  return <div style={style}>Styled with utilities</div>;
}
```

### StratoProvider

Configure Strato CSS at the app level.

```tsx
import { StratoProvider } from '@strato-css/react';

function App() {
  return (
    <StratoProvider
      theme={{
        colors: {
          primary: '#3b82f6'
        }
      }}
    >
      <YourApp />
    </StratoProvider>
  );
}
```

## Hooks Reference

### useStrato

Generate CSS classes from utility strings.

```tsx
const classes = useStrato('p-4 bg-white rounded');
```

**Parameters:**
- `utilities`: String or array of utility strings

**Returns:**
- CSS class names as a string

### useStratoTheme

Access the theme configuration.

```tsx
const theme = useStratoTheme();
```

**Returns:**
- Theme object with colors, spacing, typography, etc.

### useStratoStyle

Generate inline styles from utilities.

```tsx
const style = useStratoStyle('p-4 m-2 bg-white');
```

**Parameters:**
- `utilities`: String or array of utility strings

**Returns:**
- React CSSProperties object

## Examples

### Dynamic Classes

```tsx
function Button({ variant = 'primary', size = 'md' }) {
  const classes = useStrato([
    'px-4 py-2 rounded font-semibold transition',
    variant === 'primary' && 'bg-primary text-white hover:bg-primary-600',
    variant === 'secondary' && 'bg-gray-200 text-gray-800 hover:bg-gray-300',
    size === 'sm' && 'text-sm px-3 py-1',
    size === 'lg' && 'text-lg px-6 py-3'
  ].filter(Boolean));

  return <button className={classes}>Click me</button>;
}
```

### Theme Access

```tsx
function Card({ title }) {
  const theme = useStratoTheme();

  return (
    <div
      style={{
        padding: theme.spacing[4],
        borderRadius: theme.borderRadius.lg,
        boxShadow: theme.boxShadow.md
      }}
    >
      <h2>{title}</h2>
    </div>
  );
}
```

### Inline Styles

```tsx
function Box() {
  const style = useStratoStyle('flex items-center justify-between p-4 bg-white');

  return <div style={style}>Content</div>;
}
```

## JSX Runtime

For React 17+ with new JSX transform:

```tsx
// No need to import React
import { StratoProvider } from '@strato-css/react/jsx-runtime';

function App() {
  return (
    <StratoProvider>
      <div className="p-4 bg-white">Hello</div>
    </StratoProvider>
  );
}
```

## Development

### Testing

```bash
# Run all tests
pnpm test

# Run tests in watch mode
pnpm test --watch

# Run tests with UI
pnpm test:ui

# Run tests with coverage
pnpm test:coverage
```

### Build

```bash
# Build the package
pnpm build

# Build in watch mode
pnpm dev
```

### Type Checking

```bash
# Run TypeScript type checking
pnpm typecheck
```

## License

MIT