createStoop
Create a Stoop instance with theme configuration
Usage
Important Convention: createStoop() must be called at module level in a file named stoop.theme.ts (or theme.ts). Required pattern:
// stoop.theme.ts (or theme.ts) - REQUIRED CONVENTION
import { createStoop } from "stoop";
const stoop = createStoop({
theme: lightTheme,
themes: {
light: lightTheme,
dark: darkTheme,
},
});
// Export APIs throughout your app
export const { styled, css, Provider, useTheme, getCssText } = stoop;
Why this convention matters:
createStoop()is called at module level (when file is imported/evaluated)- Global CSS injection happens immediately during module evaluation
- All consumers import from this single file:
import { styled } from './stoop.theme' - Global CSS is available before React renders
Parameters
| Parameter | Type | Description |
|---|---|---|
| theme | Theme | Base theme object with design tokens |
| themes | Record<string, Theme> | Object mapping theme names to theme objects (optional, enables Provider and useTheme) |
| media | Record<string, string> | Media query breakpoints for responsive styles (optional; can also be defined in theme) |
| utils | Record<string, UtilityFunction> | Custom utility functions (optional) |
| prefix | string | Prefix for CSS class names and variables (default: "stoop") |
| themeMap | Record<string, ThemeScale> | Custom theme scale mapping (optional) |
| globalCss | CSS | Global styles to inject (optional; recommended over manual globalCss calls) |
Returns
Returns a StoopInstance object with:
Core Functions
styled- Function to create styled componentscss- Function to create CSS classeskeyframes- Function to create keyframe animationsglobalCss- Function to create global stylescreateTheme- Function to create additional themes
SSR Functions
getCssText- Get all generated CSS text for server-side renderingpreloadTheme- Preload theme CSS variables to prevent FOUCwarmCache- Pre-compile CSS objects to warm the cache
Theme Management (only if themes config provided)
Provider- React component for theme switchinguseTheme- Hook to access current theme
Properties
theme- Current theme object (read-only)config- Configuration object used to create this instance