0
# Component Enhancement
1

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

4
## Capabilities
5

6
### Radium HOC
7

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

10
```javascript { .api }
11
/**
12
 * Higher-order component that enhances React components with Radium styling
13
 * @param component - React component (class, function, or forwardRef)
14
 * @param config - Optional configuration object
15
 * @returns Enhanced React component with Radium capabilities
16
 */
17
function Radium(component: React.Component | Function, config?: RadiumConfig): React.Component;
18
```
19

20
**Usage Examples:**
21

22
```javascript
23
import Radium from 'radium';
24
import React from 'react';
25

26
// With class components
27
class MyComponent extends React.Component {
28
  render() {
29
    return <div style={styles.container}>Content</div>;
30
  }
31
}
32
MyComponent = Radium(MyComponent);
33

34
// With function components
35
const MyFunctionComponent = ({ children }) => (
36
  <div style={styles.container}>{children}</div>
37
);
38
const EnhancedComponent = Radium(MyFunctionComponent);
39

40
// With configuration
41
const ConfiguredComponent = Radium({
42
  plugins: [Radium.Plugins.prefix, Radium.Plugins.checkProps],
43
  userAgent: 'custom-agent'
44
})(MyComponent);
45
```
46

47
### Configuration Factory
48

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

51
```javascript { .api }
52
/**
53
 * Creates a factory function with preset configuration
54
 * @param config - Configuration object
55
 * @returns Factory function that accepts components
56
 */
57
function Radium(config: RadiumConfig): (component: React.Component) => React.Component;
58
```
59

60
**Usage Examples:**
61

62
```javascript
63
// Create reusable configuration
64
const ConfiguredRadium = Radium({
65
  userAgent: 'Mozilla/5.0...',
66
  plugins: [...customPlugins]
67
});
68

69
// Apply to multiple components
70
const Button = ConfiguredRadium(ButtonComponent);
71
const Modal = ConfiguredRadium(ModalComponent);
72
```
73

74
### Configuration Prop
75

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

78
```javascript { .api }
79
interface RadiumConfigProp {
80
  radiumConfig?: RadiumConfig;
81
}
82
```
83

84
**Usage Examples:**
85

86
```javascript
87
// Runtime configuration via props
88
<MyComponent 
89
  radiumConfig={{
90
    userAgent: req.headers['user-agent'],
91
    matchMedia: customMatchMedia
92
  }}
93
/>
94
```
95

96
### Enhanced Component Features
97

98
Components wrapped with Radium gain the following capabilities:
99

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

106
## Configuration Options
107

108
### matchMedia
109

110
Custom matchMedia implementation for server-side rendering.
111

112
```javascript { .api }
113
interface MatchMediaConfig {
114
  matchMedia: (query: string) => MediaQueryList;
115
}
116
```
117

118
**Usage Examples:**
119

120
```javascript
121
import matchMediaMock from 'match-media-mock';
122

123
const serverConfig = {
124
  matchMedia: matchMediaMock.create({
125
    type: 'screen',
126
    width: 1024,
127
    height: 768
128
  })
129
};
130
```
131

132
### plugins
133

134
Array of plugins that replaces the default plugin set.
135

136
```javascript { .api }
137
interface PluginsConfig {
138
  plugins: Plugin[];
139
}
140
```
141

142
**Usage Examples:**
143

144
```javascript
145
const customConfig = {
146
  plugins: [
147
    Radium.Plugins.mergeStyleArray,
148
    Radium.Plugins.checkProps,
149
    Radium.Plugins.resolveMediaQueries,
150
    Radium.Plugins.resolveInteractionStyles,
151
    Radium.Plugins.prefix,
152
    customPlugin, // Add custom plugin
153
    Radium.Plugins.checkProps
154
  ]
155
};
156
```
157

158
### userAgent
159

160
User agent string for server-side vendor prefixing.
161

162
```javascript { .api }
163
interface UserAgentConfig {
164
  userAgent: string;
165
}
166
```
167

168
**Usage Examples:**
169

170
```javascript
171
// Express.js server rendering
172
app.get('/', (req, res) => {
173
  const html = ReactDOMServer.renderToString(
174
    <App radiumConfig={{ userAgent: req.headers['user-agent'] }} />
175
  );
176
  res.send(html);
177
});
178
```
179

180
## Types
181

182
```javascript { .api }
183
interface RadiumConfig {
184
  /** Custom matchMedia implementation for server rendering */
185
  matchMedia?: (query: string) => MediaQueryList;
186
  /** Array of plugins to use (replaces defaults) */
187
  plugins?: Plugin[];
188
  /** User agent string for vendor prefixing */
189
  userAgent?: string;
190
}
191

192
interface MediaQueryList {
193
  matches: boolean;
194
  addListener(listener: (mql: MediaQueryList) => void): void;
195
  removeListener(listener: (mql: MediaQueryList) => void): void;
196
}
197
```