danielarias123 · willhlaw · Jun 9, 2018 · Jun 9, 2018 · Jun 10, 2018
diff --git a/README.md b/README.md
@@ -1,21 +1,24 @@
-# react-multi-toggle
+# react-multi-toggle-extra
 
 React-Multi-Toggle is a stylish & lightweight toggle component that extends the functionality of a checkbox or a radio button
 
-![alt text](https://github.com/danielarias123/react-multi-toggle/blob/master/example/images/react-multi-toggle-example.gif "Toggle Gif")
-![alt text](https://github.com/danielarias123/react-multi-toggle/blob/master/example/images/react-multi-toggle-example-2.gif "Toggle Gif 2")
+This project was forked from https://github.com/danielarias123/react-multi-toggle and extended. This project will stay in sync with its updates by monitoring it with [Backstroke](https://backstroke.co/).
+![Backstroke logo](https://backstroke.co/assets/img/logo.png){:height="40px"}
+
+![alt text](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example/images/react-multi-toggle-example.gif 'Toggle Gif')
+![alt text](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example/images/react-multi-toggle-example-2.gif 'Toggle Gif 2')
 
 ## Installation
 
-Can be installed as an [npm package](https://www.npmjs.com/package/react-multi-toggle)
+Can be installed as an [npm package](https://www.npmjs.com/package/react-multi-toggl-extra)
 
 ```
-npm install react-multi-toggle
+npm install react-multi-toggle-extra
 ```
 
 ## Development
 
-Example can be found [here](https://github.com/danielarias123/react-multi-toggle/blob/master/example).
+Example can be found [here](https://github.com/willhlaw/react-multi-toggle-extra/blob/master/example).
 
 ```shell
 npm i
@@ -34,11 +37,13 @@ import MultiToggle from `react-multi-toggle`;
 
 const groupOptions = [
   {
-    displayName: 'Couple',
+    displayName: 'Deny',
+    selectedDisplayName: 'Denied',
     value: 2
   },
   {
-    displayName: 'Family',
+    displayName: 'Accept',
+    selectedDisplayName: 'Accepted',
     value: 4
   },
 ];
@@ -89,12 +94,13 @@ Include the component's [CSS](./style.css) through [style-loader](https://www.np
 
 Toggle prop `options` is any array of objects with keys:
 
-| Key         | Type                        | Required | Description                                                               |
-| :---------- | :-------------------------- | :------- | :------------------------------------------------------------------------ |
-| value       | `Any`                       | Yes      | Value passed by prop `onSelectOption`.                                    |
-| displayName | `String` or `React Element` | No       | Label rendered on toggle for each option. If omitted, value will be used. |
-| optionClass | `String`                    | No       | Optional class to apply to toggle when option is selected.                |
-| isDisabled  | `Boolean`                   | No       | Viewable but not selectable.                                              |
+| Key                 | Type                        | Required | Description                                                                                      |
+| :------------------ | :-------------------------- | :------- | :----------------------------------------------------------------------------------------------- |
+| value               | `Any`                       | Yes      | Value passed by prop `onSelectOption`.                                                           |
+| displayName         | `String` or `React Element` | No       | Label rendered on toggle for each option. If omitted, value will be used.                        |
+| selectedDisplayName | `String` or `React Element` | No       | Label rendered on toggle for a selected option. If omitted, displayName then value will be used. |
+| optionClass         | `String`                    | No       | Optional class to apply to toggle when option is selected.                                       |
+| isDisabled          | `Boolean`                   | No       | Viewable but not selectable.                                                                     |
 
 ## License
 

diff --git a/example/index.js b/example/index.js
@@ -1,22 +1,24 @@
-import React, { Component } from "react";
-import { render } from "react-dom";
+import React, { Component } from 'react';
+import { render } from 'react-dom';
 
-import MultiToggle from "../index.es6";
+import MultiToggle from '../index.es6';
 
-import "../style.css";
+import '../style.css';
 
 const groupOptions = [
   {
-    displayName: "Single",
+    displayName: 'Undecided',
     value: 1,
     isDisabled: true
   },
   {
-    displayName: "Couple",
+    displayName: 'Deny',
+    selectedDisplayName: 'Denied',
     value: 2
   },
   {
-    displayName: "Family",
+    displayName: 'Accept',
+    selectedDisplayName: 'Accepted',
     value: 4
   }
 ];
@@ -49,4 +51,4 @@ class Example extends Component {
   };
 }
 
-render(<Example />, document.getElementById("app"));
+render(<Example />, document.getElementById('app'));
diff --git a/index.es6.js b/index.es6.js
@@ -24,12 +24,18 @@ const MultiToggle = ({
   };
 
   const createToggleOption = (...args) => {
-    const { value, displayName, isDisabled } = args[0];
+    const { value, displayName, selectedDisplayName, isDisabled } = args[0];
+
+    const isSelected = isSelectedOption(args[0]);
+
+    const derivedDisplayName = !isSelected
+      ? displayName
+      : selectedDisplayName || displayName;
 
     const selectOption = () => onSelectOption(value);
 
-    const optionClass = classNames("toggleOption", {
-      selected: isSelectedOption(args[0]),
+    const optionClass = classNames('toggleOption', {
+      selected: isSelected,
       optionDisabled: isDisabled
     });
 
@@ -44,7 +50,7 @@ const MultiToggle = ({
         className={optionClass}
         style={optionStyle}
       >
-        {displayName || value}
+        {derivedDisplayName || value}
       </div>
     );
   };

diff --git a/index.js b/index.js
@@ -49,14 +49,19 @@ var MultiToggle = function MultiToggle(_ref) {
     var _ref2 = arguments.length <= 0 ? undefined : arguments[0],
         value = _ref2.value,
         displayName = _ref2.displayName,
+        selectedDisplayName = _ref2.selectedDisplayName,
         isDisabled = _ref2.isDisabled;
 
+    var isSelected = isSelectedOption(arguments.length <= 0 ? undefined : arguments[0]);
+
+    var derivedDisplayName = !isSelected ? displayName : selectedDisplayName || displayName;
+
     var selectOption = function selectOption() {
       return onSelectOption(value);
     };
 
-    var optionClass = (0, _classnames2.default)("toggleOption", {
-      selected: isSelectedOption(arguments.length <= 0 ? undefined : arguments[0]),
+    var optionClass = (0, _classnames2.default)('toggleOption', {
+      selected: isSelected,
       optionDisabled: isDisabled
     });
 
@@ -72,7 +77,7 @@ var MultiToggle = function MultiToggle(_ref) {
         className: optionClass,
         style: optionStyle
       },
-      displayName || value
+      derivedDisplayName || value
     );
   };
 

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-multi-toggle",
+  "name": "react-multi-toggle-extra",
   "version": "1.1.0",
   "description": "Multi use toggle component for react",
   "main": "index.js",
@@ -16,11 +16,11 @@
     "react-component",
     "radio"
   ],
-  "author": "Daniel Arias <danielarias_123@msn.com>",
-  "homepage": "https://github.com/danielarias123/react-multi-toggle",
+  "author": "Will Lawrence <will.lawrence@gmail.com>",
+  "homepage": "https://github.com/willhlaw/react-multi-toggle-extra",
   "repository": {
     "type": "git",
-    "url": "git@github.com:danielarias123/react-multi-toggle.git"
+    "url": "git@github.com:willhlaw/react-multi-toggle-extra.git"
   },
   "license": "MIT",
   "devDependencies": {