rx

Overview

The rx() function — short for React Expand — function allows you to inject dynamic inline variables into your React components.
It enables variable-based styling without breaking static CSS extraction.

✅ Works only in React JSX context. Not for plain DOM or non-React frameworks.

Purpose

React's inline style attributes don't participate in class-based CSS extraction.
rx() solves this by injecting CSS variables inline, while still using your static CSS classes.

Example

TypeScript

'use client';
 
import { useState } from 'react';
import { css, rx } from '@plumeria/core';
 
const styles = css.create({
  bar: {
    width: 'var(--width)',
    background: 'aqua',
  },
});
 
export const Component = () => {
  const [state, setState] = useState(0);
  return (
    <div {...rx(styles.bar, { '--width': state + 'px' })} />
  )
}

Apply multiple variables

You can apply as many CSS variables as you need:

<div {...rx(styles.bar, {
  '--width': state + 'px',
  '--height': state + 'px'
})} />

You can also use expressions directly:

<div
  {...rx(styles.bar, {
    '--width': isActive ? '100px' : '50px',
    '--height': isActive ? '200px' : '100px',
  })}
/>

Extract logic

const dynamicVars = {
  '--width': state + 'px',
  '--height': state + 'px',
};
 
<div {...rx(styles.bar, dynamicVars)} />
<div {...rx(styles.other, dynamicVars)} />

Return value

Returns an object with:

className: your static class
style: dynamic inline variable map

const props = rx(styles.bar, { '--width': '100px' });
/*
{
  className: 'bar_xxxxx',
  style: {
    '--width': '100px'
  }
}
*/

Use sparingly

There is a runtime cost to inline styles. Prefer static styles with css.create() + cx() where possible.