@dhasdk/simple-ui 1.0.58 → 1.0.59

package/README.md

@@ -53,6 +53,8 @@ Tooltip
 
 ## Changelog
 
+1.0.59 - added **method** property to the **RadioOption** type for RadioGroup, allowing user to pass in a callback method for checked/unchecked state changes
+
 1.0.58 - removed console.log statement from **`RadioGroup`** component
 
 1.0.57 - added **`className`** prop to **`ProgressBar`** to style the outer div that is the container
@@ -1398,6 +1400,7 @@ This component takes multiple optional props in addition to any other html attri
 
 See **example usage** below for an example of retrieving the selected radio item.
 
+The **method** prop allows for a callback method that is called for every change on a radio item in the group.  Example below.
 
 Full list of props below
 
@@ -1410,6 +1413,7 @@ Full list of props below
 | classNameInput  | **`string`**  | Yes | see below  | a group of alternate css classes that can be specified by the developer for use in the input element of the component.  | 
 | classNameLabel  | **`string`**  | Yes | see below | a group of alternate css classes that can be specified by the developer for use in the label element of the component.  | 
 | dataTestId | string | Yes | undefined | A **'data-testid'** value that is applied to the fieldset element that wraps RadioGroup for testing purposes |
+| method | (id: string, value: string) => void  | Yes | undefined | A callback method that is called anytime a radio item is clicked on. The value **`method={(id, value) => console.log("id/value: " + id + "/" + value)}`** might print something like **id/value: 2/value-2** |
 | options  | **`string`**  | No |  | Array of RadioOption objects that define the options available for selection. | 
 
 1. Base CSS Classes
@@ -1490,6 +1494,27 @@ Example checking radio items for checked state
   console.log(radio?.checked);
 ```
 
+Using a callback method
+
+```jsx
+const radioOptions: RadioOption[] = [
+  {
+    label: 'Option One',
+    value:'item-1',
+  },
+  {
+    label: 'Option Two',
+    value: 'item-2',
+  }
+]
+
+<RadioGroup title="Radio Title" 
+  options={radioOptions}
+  method={(id, value) => console.log("id/value: " + id + "/" + value)}
+  // would print "id/value 1/item-1" or "id/value 2/item-2"
+  />
+```
+
 ### Dependencies
 
 **_none_**