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

State Management

Name: tessl/npm-radium
Author: tessl

Utilities for managing and querying component browser state such as hover, focus, and active states.

Capabilities

getState Function

Queries Radium's internal state to determine if an element is in a particular browser state.

/**
 * Query Radium's knowledge of element browser state
 * @param state - Component state object (typically this.state)
 * @param elementKey - Element identifier (key or ref attribute)
 * @param value - State to check (':hover', ':focus', or ':active')
 * @returns true if element is in the specified state, false otherwise
 */
function getState(
  state: object,
  elementKey: string,
  value: ':hover' | ':focus' | ':active'
): boolean;

Usage Examples:

import Radium, { getState } from 'radium';

class InteractiveComponent extends React.Component {
  render() {
    const isButtonHovered = getState(this.state, 'myButton', ':hover');
    
    return (
      <div>
        <button
          key="myButton"
          style={[
            styles.button,
            isButtonHovered && styles.buttonHovered
          ]}
        >
          Click me
        </button>
        
        {isButtonHovered && (
          <div style={styles.tooltip}>
            Button is being hovered!
          </div>
        )}
      </div>
    );
  }
}

InteractiveComponent = Radium(InteractiveComponent);

const styles = {
  button: {
    padding: '10px 20px',
    ':hover': {} // Required to track hover state
  },
  tooltip: {
    position: 'absolute',
    background: 'black',
    color: 'white',
    padding: '5px'
  }
};

State Tracking Requirements

For getState to work properly, the target element must have the corresponding state defined in its style object, even if empty.

interface StateTrackingStyle {
  ':hover'?: object;
  ':focus'?: object;
  ':active'?: object;
}

Usage Examples:

// Required: Define states you want to track
const trackingStyles = {
  base: {
    padding: '10px',
    // These enable state tracking
    ':hover': {},
    ':focus': {},
    ':active': {}
  }
};

// Then you can query these states
const isHovered = getState(this.state, 'elementKey', ':hover');
const isFocused = getState(this.state, 'elementKey', ':focus');
const isActive = getState(this.state, 'elementKey', ':active');

Element Identification

Elements are identified using their key or ref attributes. If neither is provided, 'main' is used as the default key.

interface ElementIdentification {
  /** Using key attribute */
  key: string;
  /** Or using ref attribute */
  ref: string;
  /** Default key when neither key nor ref is provided */
  defaultKey: 'main';
}

Usage Examples:

// Using key attribute
<button key="submitButton" style={styles.button}>
  Submit
</button>
const isSubmitHovered = getState(this.state, 'submitButton', ':hover');

// Using ref attribute
<input ref="emailInput" style={styles.input} />
const isEmailFocused = getState(this.state, 'emailInput', ':focus');

// Default key (when no key or ref provided)
<div style={styles.container}>Content</div>
const isMainHovered = getState(this.state, 'main', ':hover');

Cross-Element State Dependencies

Use getState to create styles that depend on the state of other elements.

Usage Examples:

class CrossElementExample extends React.Component {
  render() {
    const isMenuHovered = getState(this.state, 'menu', ':hover');
    
    return (
      <div>
        <nav
          key="menu"
          style={[
            styles.menu,
            isMenuHovered && styles.menuExpanded
          ]}
        >
          <ul style={styles.menuList}>
            <li>Item 1</li>
            <li>Item 2</li>
          </ul>
        </nav>
        
        <div style={[
          styles.content,
          isMenuHovered && styles.contentShifted
        ]}>
          Main content area
        </div>
      </div>
    );
  }
}

const styles = {
  menu: {
    width: '200px',
    transition: 'width 0.3s',
    ':hover': {} // Enable hover tracking
  },
  menuExpanded: {
    width: '300px'
  },
  content: {
    marginLeft: '200px',
    transition: 'margin-left 0.3s'
  },
  contentShifted: {
    marginLeft: '300px'
  }
};

Lifecycle Integration

getState can be used in component lifecycle methods for state-dependent logic.

Usage Examples:

class LifecycleExample extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    const wasHovered = getState(prevState, 'button', ':hover');
    const isHovered = getState(this.state, 'button', ':hover');
    
    if (!wasHovered && isHovered) {
      // Element just became hovered
      this.onHoverStart();
    } else if (wasHovered && !isHovered) {
      // Element is no longer hovered
      this.onHoverEnd();
    }
  }
  
  shouldComponentUpdate(nextProps, nextState) {
    const currentHover = getState(this.state, 'button', ':hover');
    const nextHover = getState(nextState, 'button', ':hover');
    
    // Only update if hover state changed
    return currentHover !== nextHover;
  }
}

Limitations

Stateless Components: getState cannot be used in stateless components since they don't have access to Radium's internal state
State Definition: Target elements must have the queried state defined in their style object
Element Keys: Elements must have unique key or ref attributes for identification

Types

/**
 * Valid state values for querying
 */
type StateValue = ':hover' | ':focus' | ':active';

/**
 * Element key type - string identifier
 */
type ElementKey = string;

/**
 * Component state object containing Radium's internal state
 */
interface RadiumState {
  _radiumStyleState: {
    [elementKey: string]: {
      [stateValue: string]: boolean;
    };
  };
}

Install with Tessl CLI