tessl/npm-react-jss

JSS integration with React providing CSS-in-JS styling solutions with theming support

—

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

React JSS

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

React JSS provides seamless React integration for JSS (JavaScript Style Sheets), enabling developers to write CSS-in-JS styles with dynamic theming capabilities and React-specific optimizations. It offers multiple styling approaches including Higher-Order Components, React Hooks, styled components, and JSX factories, all supporting theme injection and dynamic style generation.

Package Information

Package Name: react-jss
Package Type: npm
Language: JavaScript with TypeScript definitions
Installation: npm install react-jss

Core Imports

import { withStyles, createUseStyles, JssProvider, ThemeProvider } from 'react-jss';

For CommonJS:

const { withStyles, createUseStyles, JssProvider, ThemeProvider } = require('react-jss');

Basic Usage

import React from 'react';
import { createUseStyles } from 'react-jss';

// Define styles
const useStyles = createUseStyles({
  container: {
    padding: '20px',
    backgroundColor: '#f5f5f5',
    borderRadius: '8px'
  },
  title: {
    fontSize: '24px',
    color: (props) => props.theme.primaryColor || '#333',
    marginBottom: '16px'
  }
});

// Use in component
function MyComponent(props) {
  const classes = useStyles(props);
  return (
    <div className={classes.container}>
      <h1 className={classes.title}>Hello World</h1>
    </div>
  );
}

Architecture

React JSS is built around several key architectural components:

Multiple Styling APIs: Four distinct approaches (withStyles HOC, createUseStyles hooks, styled components, jsx factory) for different use cases and preferences
Theme System: Comprehensive theming support with providers, context, and injection capabilities
JSS Integration: Built on top of JSS core with default preset plugins for vendor prefixing, nesting, and other CSS features
Provider System: JssProvider for configuration management and stylesheet registry control
Context Architecture: JssContext for sharing JSS instances and configuration across component trees
Server-Side Rendering: Full SSR support with registry management and style extraction capabilities
Dynamic Styles: Support for function-based styles that respond to props and theme changes
Performance Optimizations: Sheet caching, reference counting, and React optimization patterns

Capabilities

Higher-Order Component API

Classic React pattern for injecting styles into components as a classes prop. Ideal for class components and when following traditional HOC patterns.

function withStyles<ClassNames extends string | number | symbol, Props, Theme>(
  styles: Styles<ClassNames, Props, Theme> | ((theme: Theme) => Styles<ClassNames, Props, undefined>),
  options?: WithStylesOptions
): <C>(comp: C) => ComponentType<
  JSX.LibraryManagedAttributes<
    C,
    Omit<GetProps<C>, 'classes'> & {
      classes?: Partial<ClassesForStyles<typeof styles>>;
      innerRef?: RefObject<any> | ((instance: any) => void);
    }
  >
>;

interface WithStylesOptions extends BaseOptions {
  injectTheme?: boolean;
  jss?: Jss;
}

Higher-Order Component API

React Hooks API

Modern React hooks approach for using JSS styles. Perfect for functional components and when you need fine-grained control over style lifecycle.

function createUseStyles<C extends string = string, Props = unknown, Theme = DefaultTheme>(
  styles: Styles<C, Props, Theme> | ((theme: Theme) => Styles<C, Props, undefined>),
  options?: CreateUseStylesOptions<Theme>
): (data?: Props & {theme?: Theme}) => Classes<C>;

interface CreateUseStylesOptions<Theme = DefaultTheme> extends BaseOptions<Theme> {
  name?: string;
}

React Hooks API

Styled Components API

Styled-components-like API for creating styled React components. Best for component libraries and when you prefer component-based styling approaches.

function styled(
  tagOrComponent: string | ComponentType<any>,
  options?: StyledOptions
): (...styles: Array<CSSObject | ((props: any) => CSSObject)>) => ComponentType<any>;

interface StyledOptions extends BaseOptions {
  shouldForwardProp?: (prop: string) => boolean;
}

Styled Components API

JSX Factory

Custom JSX factory that supports inline CSS via css prop. Useful for quick styling and prototyping without defining separate style objects.

function jsx(type: any, props: any, ...children: any[]): ReactElement;
function createJsx(css?: CSSProcessor): typeof jsx;

interface CSSProcessor {
  (styles: CSSObject): string;
}

JSX Factory

Theme System

Comprehensive theming capabilities with providers, context access, and theme injection. Essential for applications requiring consistent design systems and theme switching.

const ThemeProvider: ComponentType<{theme: any; children: ReactNode}>;
function useTheme<T = DefaultTheme>(): T;
function withTheme<P>(component: ComponentType<P>): ComponentType<P & {theme: any}>;
function createTheming<T>(defaultTheme?: T): Theming<T>;

interface Theming<Theme> {
  context: Context<Theme>;
  withTheme: (component: ComponentType<any>) => ComponentType<any>;
  useTheme: () => Theme;
  ThemeProvider: ComponentType<{theme: Theme; children: ReactNode}>;
}

Theme System

Provider and Context System

JSS configuration management and context system for sharing JSS instances, registries, and settings across your application component tree.

const JssProvider: ComponentType<{
  jss?: Jss;
  registry?: SheetsRegistry;
  generateId?: GenerateId;
  classNamePrefix?: string;
  disableStylesGeneration?: boolean;
  children: ReactNode;
  id?: CreateGenerateIdOptions;
  isSSR?: boolean;
}>;

const JssContext: Context<JssContextValue>;

interface JssContextValue {
  jss?: Jss;
  registry?: SheetsRegistry;
  managers?: Managers;
  sheetOptions: StyleSheetFactoryOptions;
  disableStylesGeneration: boolean;
  isSSR: boolean;
}

Provider and Context System

Core Types

interface WithStylesProps<S extends Styles<any, any, any> | ((theme: any) => Styles<any, any, undefined>)> {
  classes: ClassesForStyles<S>;
}

type ClassesForStyles<S extends Styles<any, any, any> | ((theme: any) => Styles<any, any, undefined>)> = 
  Classes<S extends (theme: any) => Styles<any, any, undefined> ? keyof ReturnType<S> : keyof S>;

interface BaseOptions<Theme = DefaultTheme> extends StyleSheetFactoryOptions {
  index?: number;
  theming?: Theming<Theme>;
}

type DefaultTheme = Jss.Theme;

type GetProps<C> = C extends ComponentType<infer P> ? P : never;

interface StyledOptions extends BaseOptions {
  shouldForwardProp?: (prop: string) => boolean;
}

interface CSSProcessor {
  (styles: CSSObject): string;
}

interface CSSObject {
  [key: string]: any;
}

declare global {
  namespace Jss {
    /** You can use the global Jss.Theme interface to define a project-wide default theme. */
    export interface Theme {}
  }
}

All Exports

// Main styling APIs
function withStyles<ClassNames extends string | number | symbol, Props, Theme>(
  styles: Styles<ClassNames, Props, Theme> | ((theme: Theme) => Styles<ClassNames, Props, undefined>),
  options?: WithStylesOptions
): <C>(comp: C) => ComponentType<
  JSX.LibraryManagedAttributes<
    C,
    Omit<GetProps<C>, 'classes'> & {
      classes?: Partial<ClassesForStyles<typeof styles>>;
      innerRef?: RefObject<any> | ((instance: any) => void);
    }
  >
>;

function createUseStyles<C extends string = string, Props = unknown, Theme = DefaultTheme>(
  styles: Styles<C, Props, Theme> | ((theme: Theme) => Styles<C, Props, undefined>),
  options?: CreateUseStylesOptions<Theme>
): (data?: Props & {theme?: Theme}) => Classes<C>;

function styled(
  tagOrComponent: string | ComponentType<any>,
  options?: StyledOptions
): (...styles: Array<CSSObject | ((props: any) => CSSObject)>) => ComponentType<any>;

function jsx(type: any, props: any, ...children: any[]): ReactElement;
function createJsx(css?: CSSProcessor): typeof jsx;

// Provider and context
const JssProvider: ComponentType<{
  jss?: Jss;
  registry?: SheetsRegistry;
  generateId?: GenerateId;
  classNamePrefix?: string;
  disableStylesGeneration?: boolean;
  children: ReactNode;
  id?: CreateGenerateIdOptions;
  isSSR?: boolean;
}>;

const JssContext: Context<JssContextValue>;

// Re-exported from JSS core
const jss: Jss;
const SheetsRegistry: typeof JSSSheetsRegistry;
const createGenerateId: CreateGenerateId;

// Re-exported from theming package  
const ThemeProvider: ComponentType<{theme: any; children: ReactNode}>;
const useTheme: <T = DefaultTheme>() => T;
const withTheme: <P>(component: ComponentType<P>) => ComponentType<P & {theme: any}>;
const createTheming: <T>(defaultTheme?: T) => Theming<T>;

// Default export
export default withStyles;