tessl/npm-radium

A set of tools to manage inline styles on React elements with support for pseudo-classes, media queries, and keyframe animations.

—

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

Radium

Name: tessl/npm-radium
Author: tessl

Radium is a React library that enables CSS-in-JS styling by managing inline styles on React elements. It provides powerful styling capabilities without traditional CSS, including browser state handling (:hover, :focus, :active), media queries, automatic vendor prefixing, and keyframe animations.

Package Information

Package Name: radium
Package Type: npm
Language: JavaScript/TypeScript
Installation: npm install radium
Peer Dependencies: React ^16.8.0 || ^17.0.0

Core Imports

import Radium from 'radium';
import { Plugins, Style, StyleRoot, getState, keyframes } from 'radium';

For CommonJS:

const Radium = require('radium');
const { Plugins, Style, StyleRoot, getState, keyframes } = require('radium');

Basic Usage

import Radium from 'radium';
import React from 'react';

class Button extends React.Component {
  render() {
    return (
      <button style={[styles.base, styles[this.props.kind]]}>
        {this.props.children}
      </button>
    );
  }
}

Button = Radium(Button);

const styles = {
  base: {
    color: '#fff',
    backgroundColor: '#0074d9',
    border: 0,
    borderRadius: '0.3em',
    padding: '0.4em 1em',
    
    ':hover': {
      backgroundColor: '#0088FF'
    },
    
    ':focus': {
      backgroundColor: '#0088FF'
    },
    
    '@media (min-width: 992px)': {
      padding: '0.6em 1.2em'
    }
  },
  
  primary: {
    backgroundColor: '#0074d9'
  }
};

Architecture

Radium is built around several key components:

Higher-Order Component (HOC): The main Radium() function wraps React components to enable enhanced styling
Plugin System: Modular architecture where styling features are implemented as plugins
Style Processing: Runtime style resolution through a plugin chain
Context System: React Context for sharing configuration and style management
Style Management: Global style injection for keyframes and media queries

Capabilities

Component Enhancement

Core higher-order component that wraps React components to enable Radium's styling features.

function Radium(component: React.Component, config?: RadiumConfig): React.Component;

interface RadiumConfig {
  matchMedia?: (query: string) => MediaQueryList;
  plugins?: Plugin[];
  userAgent?: string;
}

Component Enhancement

Style Components

React components for rendering CSS rules and managing global styles.

// Style component for rendering CSS rules
const Style: React.ComponentType<{
  rules: object;
  scopeSelector?: string;
  radiumConfig?: RadiumConfig;
}>;

// StyleRoot component for global style management
const StyleRoot: React.ComponentType<{
  children: React.ReactNode;
  radiumConfig?: RadiumConfig;
}>;

Style Components

State Management

Utilities for managing and querying component browser state.

function getState(
  state: object,
  elementKey: string,
  value: ':hover' | ':focus' | ':active'
): boolean;

State Management

Keyframe Animations

System for creating and managing CSS keyframe animations.

function keyframes(
  keyframeRules: { [percentage: string]: object },
  name?: string
): KeyframesObject;

interface KeyframesObject {
  __radiumKeyframes: boolean;
  __process(userAgent?: string): { animationName: string; css: string };
}

Keyframe Animations

Plugin System

Extensible plugin architecture for customizing Radium's behavior.

interface Plugin {
  (config: PluginConfig): PluginResult | void;
}

interface PluginConfig {
  componentName: string;
  config: RadiumConfig;
  props: object;
  style: object;
  addCSS: (css: string) => { remove: () => void };
  getState: (stateKey: string, elementKey?: string) => any;
  setState: (stateKey: string, value: any, elementKey?: string) => void;
}

interface PluginResult {
  componentFields?: object;
  globalState?: object;
  props?: object;
  style?: object;
}

Plugin System

Test Utilities

Development-only utilities for testing and debugging Radium components.

// Available only in development builds (NODE_ENV !== 'production')
interface TestMode {
  /** Clear all global Radium state */
  clearState(): void;
  /** Enable test mode (reduces warnings/errors) */
  enable(): void;
  /** Disable test mode */
  disable(): void;
}

// Access via Radium.TestMode in development
const testMode: TestMode | undefined;

Types

interface RadiumConfig {
  /** Custom matchMedia implementation for server rendering */
  matchMedia?: (query: string) => MediaQueryList;
  /** Array of plugins to use (replaces defaults) */
  plugins?: Plugin[];
  /** User agent string for vendor prefixing */
  userAgent?: string;
}

interface MediaQueryList {
  matches: boolean;
  addListener(listener: (mql: MediaQueryList) => void): void;
  removeListener(listener: (mql: MediaQueryList) => void): void;
}