Skip to content

Commit c4008f2

Browse files
committed
Improve documentation on the icons property
1 parent 8c1aa1c commit c4008f2

File tree

1 file changed

+25
-1
lines changed

1 file changed

+25
-1
lines changed

README.md

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,6 +87,30 @@ class Widget extends React.Component {
8787

8888
All node objects **must** have a unique `value`. This value is serialized into the `checked` and `expanded` arrays and is also used for performance optimizations.
8989

90+
#### Changing the Default Icons
91+
92+
By default, **react-checkbox-tree** use Font Awesome for the various icons that appear in the tree. To change the defaults, simply pass in the `icons` property and override the defaults:
93+
94+
``` jsx
95+
<CheckboxTree
96+
...
97+
icons={{
98+
check: <span className="rct-icon rct-icon-check" />,
99+
uncheck: <span className="rct-icon rct-icon-uncheck" />,
100+
halfCheck: <span className="rct-icon rct-icon-half-check" />,
101+
expandClose: <span className="rct-icon rct-icon-expand-close" />,
102+
expandOpen: <span className="rct-icon rct-icon-expand-open" />,
103+
expandAll: <span className="rct-icon rct-icon-expand-all" />,
104+
collapseAll: <span className="rct-icon rct-icon-collapse-all" />,
105+
parentClose: <span className="rct-icon rct-icon-parent-close" />,
106+
parentOpen: <span className="rct-icon rct-icon-parent-open" />,
107+
leaf: <span className="rct-icon rct-icon-leaf" />,
108+
}}
109+
/>
110+
```
111+
112+
Note that you can override as many or as little icons as you like.
113+
90114
### Properties
91115

92116
| Property | Type | Description | Default |
@@ -96,7 +120,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
96120
| `disabled` | bool | If true, the component will be disabled and nodes cannot be checked. | `false` |
97121
| `expandDisabled` | bool | If true, the ability to expand nodes will be disabled. | `false` |
98122
| `expandOnClick` | bool | If true, nodes will be expanded by clicking on labels. Requires a non-empty `onClick` function. | `false` |
99-
| `icons` | object | Nodes for `check`, `uncheck`, `halfCheck`, `expandClose`, `expandOpen`, `parentClose`, `parentOpen`, and `leaf` icons. | { ... } |
123+
| `icons` | object | An object containing the mappings for the various icons and their components. See **Changing the Default Icons**. | { ... } |
100124
| `expanded` | array | An array of expanded node values. | `[]` |
101125
| `name` | string | Optional name for the hidden `<input>` element. | `undefined` |
102126
| `nameAsArray` | bool | If true, the hidden `<input>` will encode its values as an array rather than a joined string. | `false` |

0 commit comments

Comments
 (0)