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

Overview

Eval results

Files

Component Enhancement

Name: tessl/npm-radium
Author: tessl

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

Capabilities

Radium HOC

The main Radium function that wraps React components to add inline style processing, browser state handling, and media query support.

/**
 * Higher-order component that enhances React components with Radium styling
 * @param component - React component (class, function, or forwardRef)
 * @param config - Optional configuration object
 * @returns Enhanced React component with Radium capabilities
 */
function Radium(component: React.Component | Function, config?: RadiumConfig): React.Component;

Usage Examples:

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

// With class components
class MyComponent extends React.Component {
  render() {
    return <div style={styles.container}>Content</div>;
  }
}
MyComponent = Radium(MyComponent);

// With function components
const MyFunctionComponent = ({ children }) => (
  <div style={styles.container}>{children}</div>
);
const EnhancedComponent = Radium(MyFunctionComponent);

// With configuration
const ConfiguredComponent = Radium({
  plugins: [Radium.Plugins.prefix, Radium.Plugins.checkProps],
  userAgent: 'custom-agent'
})(MyComponent);

Configuration Factory

When called with just a configuration object, Radium returns a factory function for creating configured components.

/**
 * Creates a factory function with preset configuration
 * @param config - Configuration object
 * @returns Factory function that accepts components
 */
function Radium(config: RadiumConfig): (component: React.Component) => React.Component;

Usage Examples:

// Create reusable configuration
const ConfiguredRadium = Radium({
  userAgent: 'Mozilla/5.0...',
  plugins: [...customPlugins]
});

// Apply to multiple components
const Button = ConfiguredRadium(ButtonComponent);
const Modal = ConfiguredRadium(ModalComponent);

Configuration Prop

Components wrapped with Radium accept a radiumConfig prop for runtime configuration.

interface RadiumConfigProp {
  radiumConfig?: RadiumConfig;
}

Usage Examples:

// Runtime configuration via props
<MyComponent 
  radiumConfig={{
    userAgent: req.headers['user-agent'],
    matchMedia: customMatchMedia
  }}
/>

Enhanced Component Features

Components wrapped with Radium gain the following capabilities:

Array Style Merging: Style prop accepts arrays that are intelligently merged
Pseudo-class Support: Styles with :hover, :focus, :active keys
Media Query Support: Styles with @media keys for responsive design
Automatic Prefixing: Vendor prefixes applied automatically
Keyframe Animation: Support for animation objects created with keyframes()

Configuration Options

matchMedia

Custom matchMedia implementation for server-side rendering.

interface MatchMediaConfig {
  matchMedia: (query: string) => MediaQueryList;
}

Usage Examples:

import matchMediaMock from 'match-media-mock';

const serverConfig = {
  matchMedia: matchMediaMock.create({
    type: 'screen',
    width: 1024,
    height: 768
  })
};

plugins

Array of plugins that replaces the default plugin set.

interface PluginsConfig {
  plugins: Plugin[];
}

Usage Examples:

const customConfig = {
  plugins: [
    Radium.Plugins.mergeStyleArray,
    Radium.Plugins.checkProps,
    Radium.Plugins.resolveMediaQueries,
    Radium.Plugins.resolveInteractionStyles,
    Radium.Plugins.prefix,
    customPlugin, // Add custom plugin
    Radium.Plugins.checkProps
  ]
};

userAgent

User agent string for server-side vendor prefixing.

interface UserAgentConfig {
  userAgent: string;
}

Usage Examples:

// Express.js server rendering
app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(
    <App radiumConfig={{ userAgent: req.headers['user-agent'] }} />
  );
  res.send(html);
});

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

Install with Tessl CLI