add docs on `classSet` add-on
Cheng Lou committed
Oct 31, 2013 at 21:53 UTC
899ae83acbaca830fadc633e75f4f97da582648f
3 files changed
+49
-1
docs/_config.yml
+2
@@ -58,6 +58,8 @@ nav_docs_sections:
58
title: Animation
59
- id: form-input-binding-sugar
60
title: Form Input Binding Sugar
61
+ - id: class-name-manipulation
62
+ title: Class Name Manipulation
63
- id: examples
64
title: Examples
65
- title: Reference
docs/docs/09.2-form-input-binding-sugar.md
+1
-1
@@ -4,7 +4,7 @@ title: Form Input Binding Sugar
4
layout: docs
5
permalink: form-input-binding-sugar.html
6
prev: animation.html
7
-next: examples.html
7
+next: class-name-manipulation.html
8
---
9
10
`ReactLink` is an easy way to express two-way binding with React.
docs/docs/09.3-class-name-manipulation.md
new
+46
@@ -0,0 +1,46 @@
1
+---
2
+id: class-name-manipulation
3
+title: Class Name Manipulation
4
+layout: docs
5
+permalink: class-name-manipulation.html
6
+prev: form-input-binding-sugar.html
7
+next: examples.html
8
+---
9
+
10
+`classSet()` is a neat utility for easily manipulating the DOM `class` string.
11
+
12
+Here's a common scenario and its solution without `classSet()`:
13
+
14
+```javascript
15
+// inside some `<Message />` React component
16
+render: function() {
17
+ var classString = 'message';
18
+ if (this.props.isImportant) {
19
+ classString += ' message-important';
20
+ }
21
+ if (this.props.isRead) {
22
+ classString += ' message-read';
23
+ }
24
+ // 'message message-important message-read'
25
+ return <div className={classString}>Great, I'll be there.</div>
26
+}
27
+```
28
+
29
+This can quickly get tedious, as assigning class name strings can be hard to read and error-prone. `classSet()` solves this problem:
30
+
31
+```javascript
32
+render: function() {
33
+ var classSet = React.addons.classSet;
34
+ var classes = {
35
+ 'message': true,
36
+ 'message-important': this.props.isImportant,
37
+ 'message-read': this.props.isRead
38
+ }
39
+ // same final string, but much cleaner
40
+ return <div className={classSet(classes)}>Great, I'll be there.</div>
41
+}
42
+```
43
+
44
+Pass to `classSet()` an object, whose key is the CSS class name you might or might not need, and whose value is a boolean (or anything that converts to it) that indicates whether the key should be present in the final class string.
45
+
46
+No more hacky string concatenations!