@strato-css/react

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

Installation

pnpm add @strato-css/react

Usage

useStrato Hook

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

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.

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.

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.

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.

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.

const theme = useStratoTheme();

Returns:

• Theme object with colors, spacing, typography, etc.

useStratoStyle

Generate inline styles from utilities.

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

Parameters:

• utilities: String or array of utility strings

Returns:

• React CSSProperties object

Examples

Dynamic Classes

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

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

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:

// 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

# 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

# Build the package
pnpm build

# Build in watch mode
pnpm dev

Type Checking

# Run TypeScript type checking
pnpm typecheck

License

MIT