or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

component-composition.mdcontext-provider.mdcore-styling.mdindex.mdreact-hooks.md
tile.json

tessl/npm-styletron-react

React bindings for Styletron CSS-in-JS toolkit providing styled components and hooks

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/styletron-react@6.1.x

To install, run

npx @tessl/cli install tessl/npm-styletron-react@6.1.0

index.mddocs/

Styletron React

Styletron React provides React bindings for Styletron, a CSS-in-JS toolkit that enables component-oriented styling with atomic CSS generation. It offers styled components through a chainable API, enabling developers to create styled components with prop interfaces for conditional and dynamic styling.

Package Information

  • Package Name: styletron-react
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install styletron-react

Core Imports

import { styled, Provider, useStyletron, type StyletronComponent } from "styletron-react";
import type { StyleObject } from "styletron-standard";

For CommonJS:

const { styled, Provider, useStyletron } = require("styletron-react");

Basic Usage

import React from "react";
import { styled, Provider } from "styletron-react";
import { Client } from "styletron-engine-atomic";

// Initialize Styletron engine
const engine = new Client();

// Create styled components
const Button = styled("button", {
  backgroundColor: "blue",
  color: "white",
  padding: "8px 16px",
  border: "none",
  borderRadius: "4px",
});

// Dynamic styling based on props
const DynamicButton = styled("button", (props: {$primary: boolean}) => ({
  backgroundColor: props.$primary ? "blue" : "gray",
  color: "white",
  padding: "8px 16px",
}));

function App() {
  return (
    <Provider value={engine}>
      <Button>Static Button</Button>
      <DynamicButton $primary={true}>Primary Button</DynamicButton>
    </Provider>
  );
}

Architecture

Styletron React is built around several key components:

  • Styled Function: Primary API for creating styled React components with static or dynamic styles
  • Composition Utilities: Functions to extend and modify existing styled components (withStyle, withTransform, withWrapper)
  • Context System: Provider component that supplies the Styletron engine to all styled components
  • Hooks API: useStyletron hook for direct CSS class generation within functional components
  • Development Tools: Debug engine and devtools integration for development mode

Capabilities

Core Styling

Primary styling functionality for creating styled React components with both static and dynamic styles.

function styled<T extends React.ElementType, Props extends {}>(
  component: T,
  style: StyleObject | ((props: Props) => StyleObject)
): StyletronComponent<T, Props>;

Core Styling

Component Composition

Utilities for extending and modifying existing styled components with additional styles and transformations.

function withStyle<Base extends StyletronComponent<any, any>, Props = {}>(
  component: Base,
  style: StyleObject | ((props: Props) => StyleObject)
): StyletronComponent<any, any>;

function withTransform<Base extends StyletronComponent<any, any>, Props>(
  component: Base,
  style: (style: StyleObject, props: Props) => StyleObject
): StyletronComponent<any, any>;

function withWrapper<Base extends StyletronComponent<any, any>, Props>(
  component: Base,
  wrapper: (component: Base) => React.ComponentType<Props>
): StyletronComponent<any, any>;

Component Composition

React Hooks

Hook-based API for direct CSS class generation and integration with React functional components.

function useStyletron(): [(style: StyleObject) => string];

React Hooks

Context and Provider

Context system for providing Styletron engine instances to styled components throughout the React component tree.

const Provider: React.ComponentType<{
  children: React.ReactNode;
  value: StandardEngine;
  debugAfterHydration?: boolean;
  debug?: any;
}>;

Context and Provider

Core Types

interface StyletronComponent<D extends React.ElementType, P extends {}> {
  <C extends React.ElementType = D>(
    props: {
      $as?: C;
    } & OverrideProps<C, P>
  ): JSX.Element;
  __STYLETRON__: any;
  displayName?: string;
}

type StyletronProps<Props = {}> = Partial<{
  $style: StyleObject | ((props: Props) => StyleObject);
  $as: React.ComponentType<any> | keyof JSX.IntrinsicElements;
  className: string;
  /** @deprecated Use ref instead */
  $ref: Props extends {ref?: infer T} ? T : React.Ref<any>;
  ref: Props extends {ref?: infer T} ? T : React.Ref<any>;
}>;

type StyleObject = {
  [property: string]: string | number | StyleObject;
  // Supports pseudo-selectors and media queries
  ":hover"?: StyleObject;
  ":focus"?: StyleObject;
  ":active"?: StyleObject;
  "@media (max-width: 768px)"?: StyleObject;
  // ... other CSS properties, pseudo-selectors, and media queries
};