Add onClick and expandOnClick properties

README.md

@@ -95,6 +95,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | `checked`            | array    | An array of checked node values.                                                                 | `[]`        |
 | `disabled`           | bool     | If true, the component will be disabled and nodes cannot be checked.                             | `false`     |
 | `expandDisabled`     | bool     | If true, the ability to expand nodes will be disabled.                                           | `false`     |
+| `expandOnClick`      | bool     | If true, nodes will be expanded by clicking on labels. Requires a non empty `onClick` function.  | `false`     |
 | `expanded`           | array    | An array of expanded node values.                                                                | `[]`        |
 | `name`               | string   | Optional name for the hidden `<input>` element.                                                  | `undefined` |
 | `nameAsArray`        | bool     | If true, the hidden `<input>` will encode its values as an array rather than a joined string.    | `false`     |
@@ -104,6 +105,7 @@ All node objects **must** have a unique `value`. This value is serialized into t
 | `optimisticToggle`   | bool     | If true, toggling a partially-checked node will select all children. If false, it will deselect. | `true`      |
 | `showNodeIcon`       | bool     | If true, each node will show a parent or leaf icon.                                              | `true`      |
 | `onCheck`            | function | onCheck handler: `function(checked) {}`                                                          | `() => {}`  |
+| `onClick`            | function | onClick handler: `function(clicked) {}`. If set, it will be called when clicked on a node label. | `() => {}`  |
 | `onExpand`           | function | onExpand handler: `function(expanded) {}`                                                        | `() => {}`  |
 
 #### Node Properties

examples/dist/index.html

@@ -64,6 +64,16 @@ <h2>Large Data Example</h2>
       <p>The checkbox tree is capable of supporting a large number of nodes at once.</p>
       <div id="large-data-example"></div>
 
+      <h2>Clickable Labels Example</h2>
+      <p>
+        By default, clicking on the node label texts toggle the checkbox value. Providing an <code>onClick</code> property the checkbox will toggle
+        only when clicking on the checkbox and the provided function will be called when clicking on the node label text.
+      </p>
+      <p>
+        When the <code>onClick</code> function is defined passing the <code>expandOnClick</code> property will expand the clicked node automatically.
+      </p>
+      <div id="clickable-labels-example"></div>
+
       <footer class="site-footer">
         <span class="site-footer-owner">
           <a href="https://github.com/jakezatecky/react-checkbox-tree">React Checkbox Tree</a> is maintained by <a href="https://github.com/jakezatecky">jakezatecky</a>.