tessl/npm-styletron-react

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Styletron React

Name: tessl/npm-styletron-react
Author: tessl

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
};