0
# React Hooks API
1

2
The React Hooks API provides a modern approach for using JSS styles in functional components. This API is perfect for functional components and when you need fine-grained control over style lifecycle.
3

4
## Capabilities
5

6
### createUseStyles Function
7

8
Creates a React hook for using JSS styles with full theme support and dynamic styling capabilities.
9

10
```typescript { .api }
11
/**
12
 * Creates a React hook for using JSS styles with theme support
13
 * @param styles - JSS styles object or function that returns styles based on theme
14
 * @param options - Configuration options for the hook
15
 * @returns Hook function that returns CSS classes object
16
 */
17
function createUseStyles<C extends string = string, Props = unknown, Theme = DefaultTheme>(
18
  styles: Styles<C, Props, Theme> | ((theme: Theme) => Styles<C, Props, undefined>),
19
  options?: CreateUseStylesOptions<Theme>
20
): (data?: Props & {theme?: Theme}) => Classes<C>;
21

22
interface CreateUseStylesOptions<Theme = DefaultTheme> extends BaseOptions<Theme> {
23
  /** Name for the stylesheet (useful for debugging) */
24
  name?: string;
25
  /** Index for controlling stylesheet insertion order */
26
  index?: number;
27
  /** Custom theming context */
28
  theming?: Theming<Theme>;
29
}
30
```
31

32
**Usage Examples:**
33

34
```typescript
35
import React from 'react';
36
import { createUseStyles } from 'react-jss';
37

38
// Static styles
39
const useStyles = createUseStyles({
40
  container: {
41
    padding: '20px',
42
    backgroundColor: '#f5f5f5',
43
    borderRadius: '8px'
44
  },
45
  title: {
46
    fontSize: '24px',
47
    color: '#333',
48
    marginBottom: '16px'
49
  },
50
  button: {
51
    padding: '10px 20px',
52
    backgroundColor: '#007bff',
53
    color: 'white',
54
    border: 'none',
55
    borderRadius: '4px',
56
    cursor: 'pointer',
57
    '&:hover': {
58
      backgroundColor: '#0056b3'
59
    }
60
  }
61
});
62

63
function MyComponent() {
64
  const classes = useStyles();
65
  
66
  return (
67
    <div className={classes.container}>
68
      <h1 className={classes.title}>Hello World</h1>
69
      <button className={classes.button}>Click me</button>
70
    </div>
71
  );
72
}
73
```
74

75
### Dynamic Styles with Props
76

77
Create styles that respond to component props:
78

79
```typescript
80
import React from 'react';
81
import { createUseStyles } from 'react-jss';
82

83
const useStyles = createUseStyles({
84
  card: {
85
    padding: '16px',
86
    borderRadius: '8px',
87
    backgroundColor: (props) => props.variant === 'primary' ? '#007bff' : '#f8f9fa',
88
    color: (props) => props.variant === 'primary' ? 'white' : '#333',
89
    border: (props) => props.bordered ? '1px solid #dee2e6' : 'none',
90
    width: (props) => props.fullWidth ? '100%' : 'auto'
91
  },
92
  title: {
93
    fontSize: (props) => props.size === 'large' ? '24px' : '18px',
94
    fontWeight: (props) => props.bold ? 'bold' : 'normal',
95
    marginBottom: '12px'
96
  }
97
});
98

99
function Card({ variant = 'default', bordered = false, fullWidth = false, size = 'medium', bold = false, title, children }) {
100
  const classes = useStyles({ variant, bordered, fullWidth, size, bold });
101
  
102
  return (
103
    <div className={classes.card}>
104
      <h3 className={classes.title}>{title}</h3>
105
      {children}
106
    </div>
107
  );
108
}
109

110
// Usage
111
<Card variant="primary" bordered fullWidth size="large" bold title="My Card">
112
  Content here
113
</Card>
114
```
115

116
### Theme-Based Styles
117

118
Use theme values in your styles:
119

120
```typescript
121
import React from 'react';
122
import { createUseStyles, ThemeProvider } from 'react-jss';
123

124
const useStyles = createUseStyles((theme) => ({
125
  container: {
126
    padding: theme.spacing.medium,
127
    backgroundColor: theme.colors.background,
128
    borderRadius: theme.borderRadius,
129
    boxShadow: theme.shadows.small
130
  },
131
  title: {
132
    fontSize: theme.typography.heading.fontSize,
133
    fontWeight: theme.typography.heading.fontWeight,
134
    color: theme.colors.primary,
135
    marginBottom: theme.spacing.small
136
  },
137
  text: {
138
    fontSize: theme.typography.body.fontSize,
139
    lineHeight: theme.typography.body.lineHeight,
140
    color: theme.colors.text
141
  }
142
}));
143

144
function ThemedComponent({ title, children }) {
145
  const classes = useStyles();
146
  
147
  return (
148
    <div className={classes.container}>
149
      <h2 className={classes.title}>{title}</h2>
150
      <p className={classes.text}>{children}</p>
151
    </div>
152
  );
153
}
154

155
// Theme definition
156
const theme = {
157
  colors: {
158
    primary: '#007bff',
159
    background: '#f8f9fa',
160
    text: '#333'
161
  },
162
  typography: {
163
    heading: {
164
      fontSize: '24px',
165
      fontWeight: 600
166
    },
167
    body: {
168
      fontSize: '16px',
169
      lineHeight: 1.5
170
    }
171
  },
172
  spacing: {
173
    small: '8px',
174
    medium: '16px',
175
    large: '24px'
176
  },
177
  borderRadius: '8px',
178
  shadows: {
179
    small: '0 2px 4px rgba(0,0,0,0.1)'
180
  }
181
};
182

183
function App() {
184
  return (
185
    <ThemeProvider theme={theme}>
186
      <ThemedComponent title="Themed Component">
187
        This component uses theme values for styling.
188
      </ThemedComponent>
189
    </ThemeProvider>
190
  );
191
}
192
```
193

194
### Custom Theme Context
195

196
Use a custom theme context instead of the default one:
197

198
```typescript
199
import React from 'react';
200
import { createUseStyles, createTheming } from 'react-jss';
201

202
// Create custom theming
203
const { ThemeProvider, useTheme } = createTheming({
204
  primaryColor: '#ff6b6b',
205
  secondaryColor: '#4ecdc4'
206
});
207

208
const useStyles = createUseStyles(
209
  (theme) => ({
210
    button: {
211
      backgroundColor: theme.primaryColor,
212
      color: 'white',
213
      padding: '10px 20px',
214
      border: 'none',
215
      borderRadius: '4px',
216
      '&:hover': {
217
        backgroundColor: theme.secondaryColor
218
      }
219
    }
220
  }),
221
  { theming: { context: ThemeProvider.context } }
222
);
223

224
function CustomThemedButton({ children }) {
225
  const classes = useStyles();
226
  
227
  return (
228
    <button className={classes.button}>
229
      {children}
230
    </button>
231
  );
232
}
233
```
234

235
### Hook Options
236

237
Configure the hook behavior with various options:
238

239
```typescript
240
const useStyles = createUseStyles(
241
  {
242
    component: {
243
      padding: '16px',
244
      backgroundColor: '#f5f5f5'
245
    }
246
  },
247
  {
248
    name: 'MyComponent', // For debugging
249
    index: 1000, // Control CSS insertion order
250
    theming: customTheming // Use custom theming context
251
  }
252
);
253
```
254

255
### Combining with Theme Hook
256

257
Access theme values directly in your component:
258

259
```typescript
260
import React from 'react';
261
import { createUseStyles, useTheme } from 'react-jss';
262

263
const useStyles = createUseStyles({
264
  container: {
265
    padding: '20px',
266
    borderRadius: '8px'
267
  }
268
});
269

270
function MyComponent() {
271
  const classes = useStyles();
272
  const theme = useTheme();
273
  
274
  return (
275
    <div 
276
      className={classes.container}
277
      style={{ 
278
        backgroundColor: theme.backgroundColor,
279
        color: theme.textColor 
280
      }}
281
    >
282
      Content with theme colors
283
    </div>
284
  );
285
}
286
```
287

288
## Types
289

290
```typescript { .api }
291
type Classes<T extends string | number | symbol> = Record<T, string>;
292

293
interface BaseOptions<Theme = DefaultTheme> extends StyleSheetFactoryOptions {
294
  /** Index for controlling stylesheet insertion order */
295
  index?: number;
296
  /** Custom theming context */
297
  theming?: Theming<Theme>;
298
}
299
```